Question

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

挑战

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

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

Parent.component.ts

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

Parent.component.html

<router-outlet></router-outlet>

Child.component.html

@Input() patientdata:any;


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

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

Answer 1

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

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

Answer 2

使用Services在多个组件之间传递数据。
要在处理后传递数据，请返回Observer而不是数据，并在正确返回数据后通知其他组件。

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>

如何将动态数据传递到角度4中的子组件？

5 个答案: