하위 구성 요소에서 Observable을 구독하십시오. Angular2/TypeScript

Question

이것은 매우 간단한 질문이지만 Angular2를 처음 접했고 좋은 예제와 자습서를 찾을 수는 있지만 좀 더 설명이 필요합니다.

그래서 나는 가지고 있고 관찰 할 수있는 모든 콤파운드를 가지고 있습니다. 난 정말 여기에 내 코드를 편집 한하지만 여기 내 문제의 고기는, 당신은 내가 직접 자녀 수 있지만, 아마도 아래로 깊은 중첩되지 않을 수 있습니다 하위 구성 요소가 이제

@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라고 피 감시를 알 수 있습니다 세 번째 또는 네 번째 수준의 구성 요소이므로 이와 비슷합니다.

@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

구성 요소 전체를 전달할 수 있지만 말하는 것과 같이 중첩이 많을 때 약간 다른 것을하고 싶습니다. 최상위 구성 요소의 범위를 지정하는 새 서비스를 만들고 하위 구성 요소는 해당 서비스를 삽입하고 거기에있는 필드에 액세스합니다.

예를 들어 하위 구성 요소와 최상위 "작업 영역"구성 요소 간의 통신 동작을 처리하는 "작업 영역"서비스가 있습니다. 그리고 가장 중요한 부분은이 최상위 구성 요소로 범위가 지정 되었기 때문에이 서비스와 관련하여 muddying하는 나머지 앱에 대해 걱정할 필요가 없습니다.

작업 영역 서비스 :

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

}