ルーティングされた子の@Output値を親コンポーネントに取得する方法4

Question

私はAngularを初めて使用しており、子コンポーネントの配列を親コンポーネントに渡そうとしています。子コンポーネントでは、私は次のようしている：

export class AoRSummaryComponent implements OnInit, AfterViewInit, OnDestroy { 
@Output() fooDetails: EventEmitter<any> = new EventEmitter(); 
... 
//then the code that builds the array (this.detailsObj.aorDetails) 
... 
this.fooDetails.emit(this.detailsObj.aorDetails); 

私の質問は、私は* ngFor =「聞かせて詳細fooDetailsの」文でfooDetailsを使用するために、親コンポーネントのHTMLに何を含めるか、ですか？子コンポーネントをロードするのに<router-outlet>を使用しているため、私は<child-component-selector></child-component-selector>ステートメントを使用できないようです。どんな助けでも大歓迎です。

Answer 1

router-outletディレクティブで、「子」コンポーネントが「親」内部でレンダリングされている場合、親子関係はありません。この状況の典型的な解決策は、関連するコンポーネント間でサービスインスタンスを共有することです。このトピックに関する

@Injectable() 
export class FooService{ 
    private _value$ = new BehaviorSubject<number>(42); 
    ctor(){} 

    get value$(){ 
    return this._value$.asObservable(); 
    } 

    pushData(v: number){ 
    this._value$.next(v); 
    } 
} 

export class ParentComponent implements OnInit { 
value$: Observable<number>; 
ctor(private _service: FooService){} 

ngOnInit(){ 
    this.value$ = this._service.value$(); 
} 

//Add ngOnDestroy in case that you manually subscribe to value$ 
} 

export class ChildComponent{ 
    ctor(private _service: FooService){} 

    triggerEvent(v: number){ 
    this._service.pushData(v); 
    // this replaces emitter.emit(v) 
    } 
} 

詳細情報はin the docs