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

Posted 2023-02-23

【中文标题】将数据从子组件传递到父组件Angular4

【英文标题】：pass data from child component to parent component Angular4

【发布时间】：2018-02-15 10:37:54

【问题描述】：

我有存储在服务器中的 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;
      
    );
  ;

【参考方案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;
  

【讨论】：

嗨@DeborahK，非常感谢！有用。但是，我发现数据不能被覆盖，这意味着我得到的数据来自 ngOninit 和 onSelected。有什么办法，我只需要运行一次 onOnInit ，数据源将来自 onSelected() ？

谢谢！我想我想通了。我只是改变了 ngOnInit() 下面的 onSelected() 的顺序。