Angular 2 @Input：是否可以將數據從組件傳遞到另一個子路由組件？

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>元素中加載。

那麼我該如何將數據傳遞給子路由組件呢？輸入是不是正確的方式？ 我想避免雙重，高音等調用來獲取我的父路由/組件中已有的相同數據。

Answer 1

請考慮爲@Input()或@Output()創建一個Angular2服務，該服務將通過多個圖層或不相關的組件。

Answer 2

我不相信有任何方式將對象作爲輸入傳遞到路由到的組件。我通過使用帶有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 3

你可以達到你想要的東西：

• 創建一個爲您保留一些狀態的服務。因此，子組件可以稍後訪問它。
• 使用路由器（動態路由，queryParam，參數）傳遞數據。例如：users /：id => users/23
• 使用狀態管理庫傳遞數據。例如：Redux