当前位置:  开发笔记 > 编程语言 > 正文

检测由父角度2触发的子组件变量的变化

如何解决《检测由父角度2触发的子组件变量的变化》经验,为你挑选了1个好方法。

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

我正在从app向子节点发送变量,我想检测变量中的任何变化并相应地显示数据.我无法检测到变量的变化.

任何帮助?我附上了Plunker Link,我还在评论中解释了我想在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: `
    

Hello

`, }) 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: `
    

Controls: {{newdata}}

`, }) export class ChildCom { @Input() newdata: any = []; constructor(){ } // here I want to check if value of control in newdata variable is false // then display message on front end "your controls are not working" // if value of control in newdata variable is true // then display message on front end "your controls are working fine." // this should automatically happen whenever I change the value of newdata variable }

Plunker Link



1> Günter Zöchb..:

要么你做newData一个制定者,要么你实施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

推荐阅读
放ch养奶牛
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有