如何将动态数据传递给 angular 4 中的子组件？

Question

我有一个父组件，一旦我在父组件中收到响应，我就必须将数据传递给子组件。

挑战

1）我必须等待传递数据，直到我在父组件中收到响应。

2）一旦我将从子组件接收数据，我想在子组件中执行特定功能。

父组件.ts

JSON.parse(this.responseData, (key, value) => {
 if (key === 'patient-list') {
      this.mrn = this.totalPatientList[0]['value']['patientmrn'];
}
});

父组件.html

<router-outlet></router-outlet>

子组件.html

@Input() patientdata:any;


ngAfterViewChecked(){
console.log('Data Received -----', this.patientdata);    
}

我希望我能够向大家解释我的问题。

Answer 1

您的示例中没有子/父通信，因为它需要一个组件直接位于父 component.html 中。

您需要依靠防护解析器才能在数据接收时加载“Child”。

Answer 2

1. 使用服务在多个组件之间传递数据。
2. 处理后传递数据返回一个观察者而不是数据，一旦数据正确返回，其他组件将得到通知。

Answer 3

您正在使用路由，也许最好的方法是使用单例服务来进行两个组件的通信。

Answer 4

所有其他答案都是明智的，并且可以正常工作。

另一种方法是使用@ngrx来管理状态并启用单向数据流到您的组件。

Answer 5

我在将动态数据从父级传递给子级时遇到问题，四处搜索但没有得到任何帮助。 最后我尝试了这个，它对我非常有用。 试试这个，它可能对你有帮助。

子组件：

export class ChildComponent {
  @Input() title: string;

  //rest code goes here...
}

父组件：

export class ParentComponent {
        headerTitle: string = '';

        //rest code ...
//on click changing the value
        onHeaderChange() {
            this.headerTitle = "MyHeader";
        }
    }

在父组件 html 文件中放置如下代码，带单引号

<child-component [title]='headerTitle'></child-component>