パスデータ子コンポーネントからAngular4

Question

親コンポーネントに私は、サーバーに格納されたAPIのリストを持って、私が作成した

apis = { 
"Repo Assignment": "https://apis.repoAssignment", 
"Status Summary": "https://apis.statsSummary", 
... 
} 

子コンポーネントがドロップダウンメニュー：TitleDropdownComponentの子コンポーネントを、 "Repo Assignment" ...私の親コンポーネントでは、子コンポーネントから選択されたタイトルに基づいて異なるデータテーブルをレンダリングしたかったのです。

今、私は正常に子コンポーネントからタイトルを取得し、親コンポーネントのコンソールでそれらを表示できます。ただし、ngOnInit（）では、同じ変数を変更することはできません。タイトルのために常に同じAPIデータを取得します。変数は変更されません。 ngOnInitのタイトル変数を変更する方法やngOnChangesのように他の方法を使用する方法はありますか？下記の親アプリコンポーネントをご覧ください。ありがとうございました！

import { Component, Input, EventEmitter, Output, ViewChild, OnInit } from '@angular/core'; 
import { ServerGetData } from './server.getData'; 
import { TitleDropdownComponent } from './TitleDropdown/titleDropdown.component' 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
}) 
export class AppComponent implements OnInit { 
    // make ajax call from ServerGetData 

    constructor(private dataService: ServerGetData) {} 

    data = {}; 

    // get Child component variables 

    @ViewChild(TitleDropdownComponent) 
    private titleComponent: TitleDropdownComponent; 

    onSelected(selected: string) { 
    // default child component title is "Repo Assignment", in here overwrite 
    // titleComponent.title to be selected title 
    this.titleComponent.title = selected; 
    // each time can the selected title can be printed in console 
    console.log(this.titleComponent.title); 
    return this.titleComponent.title; 
    } 

    ngOnInit(): void { 

    // *** No idea why in here this.titleComponent.title is not able to change accordingly and always is default title: "Repo Assignment" *** 

    this.dataService.getData(this.titleComponent.title).subscribe(
     (data) => { 
     this.data = data.items; 
     } 
    ); 
    }; 

} 

Answer 1

ngOnInitは、コンポーネントの初期化時に常に1回だけ実行されます。他の選択が行われると、後で再実行されません。

新しい項目が選択されるたびにデータを再調整する必要がある場合は、コードをonSelectedメソッド内に移動します。

onSelected(selected: string) { 
    // default child component title is "Repo Assignment", in here overwrite 
    // titleComponent.title to be selected title 
    this.titleComponent.title = selected; 
    // each time can the selected title can be printed in console 
    console.log(this.titleComponent.title); 

    this.dataService.getData(this.titleComponent.title).subscribe(
     (data) => { 
     this.data = data.items; 
     } 
    ); 

    return this.titleComponent.title; 
    }