Компонент отзыва на переменную изменения Angular> 4

Question

Я вызываю компонент (selector = ngx-ebar-treemo) в главном компоненте следующим образом:

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

Я должен вызывать его при изменении переменных типа 1 или 2.

Спасибо.

Answer 1

вы можете передать данные от родителя к потомку с помощью input binding или использовать сервис для связи

в вашем дочернем компоненте объявить два входных свойства с @Input декораторами.и OnChanges() может использоваться для обнаружения изменений входных свойств

Angular предоставляет ловушки жизненного цикла для обнаружения изменений.OnChanges является интерфейсом и имеет объявление метода, т.е. ngOnChanges().В родительско-дочернем компоненте дочерний компонент объявляет свойство @Input() для получения значений из родительского компонента.Когда родительский компонент изменяет значение свойств, используемых в дочернем компоненте, украшенном @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>

Вы также можете использовать сервис для связи. См. Мой пост

Answer 2

Используйте @Input в компоненте.Внутри компонента (ngx-ebar-treemo) используйте метод ngOnChanges.

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

Этот метод будет вызываться каждый раз, когда происходит изменение значения типа.