检测由父 angular 2 触发的子组件变量的变化答案

【问题标题】：Detect change in child component's variable triggered by parent angular 2检测由父 angular 2 触发的子组件变量的变化
【发布时间】：2017-06-04 10:26:36
【问题描述】：

我有 2 个文件。 app.ts 和 Child.ts

我正在从应用程序向子项发送一个变量，我想检测变量中的任何变化并相应地显示数据。我无法检测到变量的变化。

有什么帮助吗？我附上了 Plunker Link，我还解释了我想在 cmets 的 Child.ts 文件中做什么

App.ts 文件

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ChildCom} from './child.ts'

@Component({
    selector: 'my-app',
    template: `
    <div>
        <h2>Hello</h2>
        <child-com newdata={{data}}></child-com>
    </div>
    `,
})
export class App {
    data: any = [];

      constructor(){
          this.data = [{"name":"control","status":"false"}];
    }
}

@NgModule({
    imports: [ BrowserModule ],
    declarations: [ App, ChildCom ],
    bootstrap: [ App ]
})
export class AppModule {}

Child.ts 文件

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

@Component({
  selector: 'child-com',
  template: `
    <div>
      <p>Controls: {{newdata}}</p>
    </div>
  `,
})

export class ChildCom {
  @Input() newdata: any = [];

  constructor(){
  }

  // here I want to check if the value of control in newdata variable is false 
  // then display a message on the front end "your controls are not working"
  // if the value of control in newdata variable is true
  // then display a message on front end "your controls are working fine."
  // this should automatically happen whenever I change the value of newdata variable
}

Plunker Link

【问题讨论】：

标签： angular eventemitter angular2-changedetection

【解决方案1】：

要么让newData 成为setter，要么实现OnChanges

export class ChildCom {
  private _newdata: any = [];
  @Input() 
  set newdata(value) {
    // code here
  }
}

export class ChildCom implements OnChanges {
  @Input() set newdata(: any = [];

  ngOnChanges(changes) {
    // code here
  }
}

https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

提示

newdata={{data}}

很好，但只支持字符串值

[newdata]=data

支持所有类型的值。

这里是更新的 plnkr 的链接以解释相同，https://plnkr.co/edit/5ahxWJ?p=preview

【讨论】：

非常感谢您的帮助。 ngOnChanges 为我工作。并感谢您的提示。
您可以将get 添加到您的第一个示例中：get newData() { return this._newData; }

【解决方案2】：

一些代码更改可以使相同的工作。

1) 提供 newData 作为输入，不使用插值将数据传递给子组件。

<child-com [newdata]="data"></child-com>

2) 检测变化的两种简单方法是 @Gunter 建议的 ngOnChanges 或使用 rxjs Observable 订阅者模型，简单的一种是 ngOnChanges。这是您使用相同的修改后的 plunkr。 https://plnkr.co/edit/5ahxWJ?p=preview

【讨论】：

你的 Plunker 帮了大忙。谢谢！

【解决方案3】：

您必须像这样进行绑定：

<child-com [newdata]="data"></child-com>

对于组件间通信的不同方法，这是一个非常好的资源：

https://angular.io/docs/ts/latest/cookbook/component-communication.html

您正在寻找的是：使用输入绑定将数据从父级传递给子级

【讨论】：