Question

我有子组件，在此我将父组件的值作为输入传递。在父组件中，我将在事件发射器触发器上更新此输入变量，但子组件不会更新。我已经检查了输入变量的更新。为什么子组件不更新？

ParentComponent.html

<app-child
[data]="data"
(filterEmmiter)="filter($event)">
</app-child>

ParentComponent.ts

data: any;
.
.
.
getUsers() {
  this.usersService.getAllUsers().subscribe(res => {
    this.data = res;
  });
}
.
.
.

filter(data){
  this.data = data
}

Answer 1

您可以尝试这样，在这里您希望将数据从父组件获取到子组件，这里您的父组件是app-child，子组件是ngOnChanges(changes: SimpleChanges)，因此这里用于从中获取数据父母对孩子，我们可以使用<app-child [data]="data" (filterEmmiter)="filter($event)"> </app-child>

ParentComponent.html


import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';

class Child  implements OnInit, OnChanges {

    @Input() Data: any; // here is the data variable which we are getting from the parent 

    constructor() {}

    ngOnchanges(changes: SimpleChanges) {
      console.log(changes); // here you will get the data from parent once the input param is change
    }   

}

child.component.ts

bins

Answer 2

最近我也遇到了类似的事情，在我的情况下，在孩子中使用 Onchanges 方法，我看到输入更改发生在我要执行的逻辑之后，然后输入的新值没有得到体现在这个逻辑上。

我所做的是在我分配输入数据的地方强制检测更改，如下所示：

我将其添加到我的构造函数中

 constructor( private changeDetector: ChangeDetectorRef) {}

然后我给数据赋值

this.data=something
this.changeDetector.detectChanges();

之后，我注意到方法 onChanges 被先调用，然后逻辑与输入的新值，之后我只是手动设置了应该放在子组件中的 Onchanges 方法中的输入值

 ngOnChanges(changes: SimpleChanges): void {
    this.put= changes.input.currentValue;
  }

Answer 3

您的子组件应公开事件发射器

DurationMillis

更新输入变量时子组件不会更新-Angular

3 个答案: