Question

我在主要组件中调用组件（selector = ngx-ebar-treemo），如下所示

<ngx-ebar-treemo *ngIf="type=='Bar' && graphic" type1="{{type1}}" type2="{{type2}}"></ngx-ebar-treemo>

当变量type1或type2发生变化时，我必须回想起他。

感谢。

Answer 1

您可以使用input binding将数据从父级传递给子级或使用服务进行通信

子组件中的

使用@Input装饰器声明两个输入属性。和OnChanges()可用于输入属性的变化检测

Angular为变更检测提供生命周期钩子。 OnChanges是一个接口，并有一个方法声明，即ngOnChanges()。在父子组件，子组件声明@Input() 从父组件获取值的属性。无论何时父母 component更改子组件中使用的属性的值用@Input()修饰，然后创建方法ngOnChanges() 子组件自动运行

import {Component, OnChanges, SimpleChanges, Input} from '@angular/core';
        export class ChildComponent implements OnChanges {
        @Input() type1:any;
        @input()type2:any;

       ngOnChanges(changes: SimpleChanges) {
              for (let propName in changes) {  
                let change = changes[propName];
                 let curVal  = JSON.stringify(change.currentValue);
                 let prevVal = JSON.stringify(change.previousValue);
                  console.log(curVal);
                 console.log(prevVal);//your logic
 }
    ......
            }

在您的主要组件中

    export class MainComponent implements OnInit {
               type1:any;
               type2:any;
           yourCustomEvent()
             {//your logic to change the value
             this.type1=somevalue;
             this.type2=somevalue2;
}
                }

main.html中

<ngx-ebar-treemo *ngIf="type=='Bar' && graphic" [type1]="type1" type2="type2"></ngx-ebar-treemo>

您也可以使用服务进行沟通请参阅我的post

Answer 2

在组件中使用@Input。在Component（ngx-ebar-treemo）中使用ngOnChanges方法。

ngOnChanges(change: SimpleChanges){
// your code here
}

每次类型值发生变化时都会调用此方法。

召回变量变量Angular上的组件＆gt; 4

2 个答案: