Angular 没有通过 ChangeDetectorRef 运行变更检测答案

【问题标题】：Angular is not running change detection through ChangeDetectorRefAngular 没有通过 ChangeDetectorRef 运行变更检测
【发布时间】：2019-05-25 09:16:38
【问题描述】：

我有一个带有输入变量“名称”的子组件。它通过 Parent 组件的数据绑定具有一些初始值。现在，当我从子组件本身内部更改“名称”的值时，Angular 不知道。我如何让 Angular 知道这一变化？

根据我在网上阅读的内容，我尝试使用 ChangeDetectorRef.detectChanges() 或 ChangeDetectorRef.markForCheck() 似乎不起作用。我想我错过了一些东西。

这是针对此问题的 stackblitz link。如果您从子组件中更改名称，然后再次尝试从父组件更改名称，它不会更改，因为 Angular 仍然认为它绑定到父组件之前提供的值。但是我从子组件内部更改了它。我该如何解决这个问题？

【问题讨论】：

您的 stackblitz 链接无效

标签： angular angular2-changedetection

【解决方案1】：

您需要使用ngOnChangeslifeCycle hook 将父组件所做的更改反映到子组件。

例如：

ngOnChanges(changes: SimpleChanges) {
    if (changes.name != undefined) {
      this.name = changes.name.currentValue           
    }
}

在 StackBiltz 中我也可以看到你已经像这样绑定了Input：

<hello name="{{ name }}"></hello>

修改为：

<hello [name]="name"></hello>

从孩子改变父母：

子组件：

@Output() ChangeName = new EventEmitter()

changeMe() {
     this.ChangeName.emit('Angular from child')
}

父组件：

 <hello [name]="name" (ChangeName)="name = $event"></hello>

【讨论】：

你能和我分享修改后的stackblitz吗？它似乎不起作用。另外，我没有对父组件进行任何更改。我对父组件不知道的子组件进行了更改，因此单击时它不会更改值。
嘿.. 我无法保存在 StackBiltz 中。可以分享一下emailid吗，我发app组件和hello组件代码
我知道我们可以使用@Output，但是考虑一个我不想发出事件的场景，那么我们如何通知 Angular？
要从子级更改父级中的任何内容，输出是必要的。给我一个你不能发出事件的例子

【解决方案2】：

要让 Angular 检测到更改，您需要更改传递给输入的变量的引用。您可以通过分配对象的副本轻松触发更改。

component.html

<button (click)="onNameChangeClicked()"> Change Name From Parent</button>

component.ts

  onNameChangeClicked() {
    this.name = Object.assign('Angular from Parent ',{});
  }

Demo

【讨论】：

【解决方案3】：

ngOnChanges

ngOnChanges 生命周期只有在有界输入属性值与当前值不同时才会运行

示例：

 OnChanges(changes: SimpleChanges){
   if(changes.name.currentValue !== changes.name.previousValue){
    //if the bound value is diffrent from currentValue then ngOnChanges will be triggered
  }

使用 ngDoCheck 生命周期挂钩。

执行更改检测的回调方法，在默认更改检测器运行。

【讨论】：