将数据从子组件传递到父组件Angular4

Question

我有存储在服务器中的 API 列表：ServerGetData，如下所示：

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

我创建了一个子组件下拉菜单：TitleDropdownComponent 子组件，它显示所有api标题：“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 只会在组件初始化时执行一次。以后不会在进行其他选择时重新执行。

如果您需要在每次选择新项目时重新获取数据，请将代码移至 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;
  }