子コンポーネントで同じObservableを購読するAngular2/TypeScript

Question

これは非常に単純な質問ですが、私はAngular2の新機能ですが、良い例とチュートリアルを見つけることができますが、時にはもう少し説明が必要です。

だから私は持っていると観測可能な、すべての非常に頻繁に更新されたのcompoentを持っています。私は本当にここに私のコードを編集しているが、ここに私の問題の肉があり、あなたは私が直接の子ではなく、おそらくにダウン深くネストされていないことがあり、子コンポーネントを持っている今

@Component({ 
    selector: 'product-profile', 
    templateUrl: './product-profile.component.html', 
    styleUrls: ['./product-profile.component.scss'] 
}) 
export class ProductProfileComponent { 
// I have ommitted so much code here.... 
product: Observable<Product>; 

constructor(
     private store: Store<any> 
    ) { 

     this.product = this.store 
        .let(getProductStore) 
        .let(getProductProfile); 

     this.product 
      .select((product: Product) => product && product.id) 
      .subscribe(productId => this.productId = productId 
      }); 
     } 

// I have omitted so much code here.... 
} 

productと呼ばれる観察可能に気づくでしょう3番目または4番目のレベルのコンポーネントのようなもの

@Component({ 
    selector: 'product-footer', 
    templateUrl: './product-footer.component.html', 
    styleUrls: ['./product-footer.component.scss'] 
}) 
export class ProductFooterComponent { 

// this is the same Observable/property from the parent 
// when there is a change in the parent I want to update the property below... 
product: Observable<Product>; 

constructor(){} 
} 

ここで私は何をすべきか分かりません。親の製品プロパティの値が変更された場合、どのように子コンポーネントの製品プロパティを更新しますか？ @Input()を使用する必要がありますか？私はこれについて考えましたが、関係が直接の親子関係ではないので、これがどのように機能するのかは分かりません。 EventEmitterのようなものを使うべきですか？どんなアドバイス/リンクも高く評価されていますが、現在は少し失われており、私のリソースは当てはまりません！

Answer 1

あなたはコンポーネント全体を通すことができますが、あなたの言っているような入れ子がたくさんあるときは少し違うことをしたいと思います。私はトップレベルコンポーネントにスコープする新しいサービスを作成し、子コンポーネントはそれを挿入してそこのフィールドにアクセスします。

たとえば、子コンポーネントと最上位の「ワークスペース」コンポーネント間の通信アクションを処理する「ワークスペース」サービスがあります。また、この最高レベルのコンポーネントにスコープが設定されているため、このサービスで迷っているアプリについては心配する必要はありません。

ワークスペースのサービス：

import { Injectable } from '@angular/core'; 


@Injectable() 
export class WorkspaceService { 

    public observable: Observable<any>; 

} 

トップレベルのコンポーネント：

@Component({ 
    moduleId: module.id, 
    providers: [ WorkspaceService ] 
}) 
export class TopLevelWorkspaceComponent { 

    constructor(private workspaceService: WorkspaceService) { 
    } 

    ngOnInit() { 
     this.workspaceService.observable = /*create observable*/; 
    } 

} 

子供：

@Component({ 
    moduleId: module.id 
}) 
export class NestedComponentUnderWorkspace { 

    constructor(private workspaceService: WorkspaceService) { 
    } 

    ngOnInit() { 
     this.workspaceService.observable.subscribe(data => console.log(data)); 
    } 

}