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

【问题标题】：child component doesn't update when I update input variable - Angular更新输入变量时子组件不更新 - Angular
【发布时间】：2020-03-20 13:29:23
【问题描述】：

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

父组件.html

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

父组件.ts

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

filter(data){
  this.data = data
}

【问题讨论】：

你能告诉你app-child组件吗？这里很重要……
KurtHamilton 在这里并不重要，只是我将数据变量作为@Input 获取并在 html 文件中迭代
您使用什么风格的变更检测？ app-child 中是否会触发 OnChanges 生命周期事件？
@night_owl 我没有使用任何类型的变更检测，我需要使用哪一种？
默认的变更检测应该没问题。如果使用 OnPush，有一些注意事项需要记住，但你没有，所以不用担心！

标签： angular render updates

【解决方案1】：

你可以这样尝试，这里你想从父组件获取数据到子组件，这里你的父组件是ParentComponent，子组件是app-child，所以这里为了从父组件获取数据我们可以使用ngOnChanges(changes: SimpleChanges)

ParentComponent.html

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

child.component.ts


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
    }   

}

【讨论】：

ngOnchanges 在这里我用 currentData 更新数据，但 html 不会再次呈现
您是说用 currentd 重命名数据变量吗？如果是，那么您必须将 @Input data: any 重命名为 @Input currentd: any。
我做了这样的ngOnChanges(changes: SimpleChanges){ this.data = changes.data.currentValue; }
是的，完美！！
不，在进行此操作之前，我正在使用一个扩展程序检查显示所有应用程序当前状态的内容，该变量在任何地方都已更新，但此更改不会影响 html。

【解决方案2】：

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

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

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

 constructor( private changeDetector: ChangeDetectorRef) {}

然后我给数据赋值

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

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

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

【讨论】：

【解决方案3】：

您的子组件应该公开一个EventEmitter。

 @Output() filteremmiter = new EventEmitter<any>();

【讨论】：

这是创建的