角度2@输入：是否可以将数据从一个组件传递到另一个子路由组件？

Question

基于Angular 2的文档，您可以使用@Input轻松地将数据从一个组件传递到另一个组件。

例如，我可以这样设置父对象：

import { Component } from '@angular/core';
import { HEROES } from './hero';
@Component({
  selector: 'hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master: string = 'Master';
}

然后按如下方式获取子组件中的数据：

import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
  selector: 'hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

很明显，将[hero]=“data”传递给父组件的模板（当然是在子选择器中），并将它们处理到子组件中。

但问题是。

我的子组件DOM元素（在本例中

然后，我如何将数据传递给子路由组件？输入不是正确的方式吗？我想避免双重，高音等调用，以获得相同的数据，已经在我的父路由/组件。




Answer 1

您可以通过以下方式实现您想要的：

• 创建一个为您保存某些状态的服务。这样子组件以后可以访问它。
• 使用路由器传递数据（动态路由、查询参数、参数）。例如：用户/：id=

Answer 2

考虑为<代码> >输入（）/代码>或<代码> @输出（）/代码>创建一个angulal2服务，该服务将传递一个以上的层或一个不相关的组件。

Answer 3

我认为没有任何方法可以将对象作为输入传递给路由到的组件。我已经通过使用一个带有可观察对象的服务在父组件和一个或多个子组件之间共享数据来实现了这一点。

基本上，父组件调用服务并将其需要的任何数据推送到它。在我的情况下，它只是一个ID，但它可以是任何东西。然后，服务可以使用该数据（或不使用该数据）执行某些操作。在我的示例中，我正在调用服务器以根据ID获取公司，但是如果您已经拥有了所需的对象，则不需要这样做。然后，它将一个对象推送到子组件中订阅的可观察流中。

父组件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { SalesProcessService } from './salesProcess.service';
import { Subscription } from 'rxjs/Rx';

@Component({
    selector: 'ex-sales-process',
    template: `
        <router-outlet></router-outlet>
    `
})
export class SalesProcessComponent implements OnInit, OnDestroy {
    private companyRowId: string;
    private paramsSubscription: Subscription;
    constructor(
        private salesProcessService: SalesProcessService,
        private route: ActivatedRoute
    ) {}
    ngOnInit() {
        this.paramsSubscription = this.route.params.subscribe((params: Params) => {
            if (this.companyRowId !== params['companyId']) {
                this.companyRowId = params['companyId'];
                this.salesProcessService.getCompany(this.companyRowId);
            }
        });
    }
    ngOnDestroy() {
        this.paramsSubscription.unsubscribe();
    }

}

服务：

import { Injectable } from '@angular/core';
import { CompanyDataService } from '../common/services/data';
import { ReplaySubject } from 'rxjs';
import { Observable, Subject, Subscription } from 'rxjs/Rx';

@Injectable()
export class SalesProcessService {
    private companyLoadedSource = new ReplaySubject<any>(1);
    /* tslint:disable:member-ordering */
    companyLoaded$ = this.companyLoadedSource.asObservable();
    /* tslint:enable:member-ordering */

    constructor (
        private companyDataService: CompanyDataService) { }
    getCompany(companyRowId: string) {
      // Data service that makes http call and returns Observable
        this.companyDataService.getCompany(companyRowId).subscribe(company => this.companyLoadedSource.next(company));
    }

}

子组件

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SalesProcessService } from '../salesProcess.service';
import { Subscription } from 'rxjs/Rx';

@Component({
    selector: 'ex-company',
    template: require('./company.component.html'),
    styles: [require('./company.component.css')]
})
export class CompanyComponent implements OnInit, OnDestroy {
    company: any;
    private companySub: Subscription;
    constructor(
        private salesProcessService: SalesProcessService
        ) { }
    ngOnInit() {
        this.companySub = this.salesProcessService.companyLoaded$.subscribe(company => {
            this.company = company;
        });
    }
    ngOnDestroy() {
        this.companySub.unsubscribe();
    }
}