Question

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

根据我在网上阅读的内容，我尝试使用ChangeDetectorRef.detectChanges()或ChangeDetectorRef.markForCheck()似乎无效。我想我缺少了一些东西。

这是此问题的link排行榜。如果您在子组件中更改名称，然后再次尝试从父组件更改名称，则该名称不会更改，因为Angular仍然认为它已绑定到父组件先前提供的值。但是我从Child组件内部进行了更改。我该如何解决？

Answer 1

您需要使用ngOnChanges lifeCycle挂钩将父组件中所做的更改反映到子组件中。

例如：

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>

Answer 2

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

component.html

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

component.ts

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

Demo

Answer 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 生命周期挂钩。

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

Angular未通过ChangeDetectorRef运行更改检测

3 个答案: