Question

基于Angular 2的docs，您可以使用@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元素（在本例中为<hero-child>）在父模板中不可用，而是在<router-outlet>元素中加载。

如何将数据传递给子路由组件呢？难道输入不正确吗？我想避免使用double，treble等调用来获取父路由/组件中已有的相同数据。

Answer 1

我不相信有任何方法可以将对象作为输入传递给路由到的组件。我通过使用带有observable的服务来完成此操作，以便在父项和一个或多个子组件之间共享数据。

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

父组件：

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();
    }
}

Answer 2

考虑为@Input()或@Output()创建一个Angular2服务，该服务将传递多个层或不相关的组件。

Answer 3

您可以通过以下方式实现目标：

创建一个为您保留某些状态的服务。因此子组件可以在以后访问它。
使用路由器传递数据（动态路由，queryParam，param）。例如：users /：id =＆gt;用户/ 23
使用状态管理库传递数据。例如：Redux

Angular 2 @Input：是否可以将数据从组件传递到另一个子路由组件？

3 个答案: