Функция триггера на @Input () изменена

Question

У меня есть родительский компонент со следующим кодом в parent.component.html:

<app-child [idElement]=(idElement)></app-child>

В дочернем компоненте у меня есть такой входной параметр:

@Input() idElement : number;

А также функция с именем

getSpecs()

Я хочу, чтобы функция getSpecs() выполнялась дочерним элементом, когда входное значение изменяется родительским элементом. Это возможно?

Answer 1

Для этого вам необходимо использовать угловой крюк жизненного цикла ngOnChanges.

В вашем случае это будет что-то вроде:

ngOnChanges(changes: SimpleChanges) {
    if (changes['idElement']) {
        // Do your logic here
        this.getSpecs()
    }
}

Документация здесь .

Answer 2

Есть еще один вариант без OnChanges.

@Component({
    selector: 'app-child',
    template: '<div></div>'
})
export class AppChildComponent {
    private _idElement: number;

    get idElement(): number {
        return this._idElement;
    }

    @Input('idElement') set idElement(value: number) {
        if (value) {
            this._idElement = value;
            this.getSpecs();
        }
    }
}

Надеюсь, это поможет! :)

Answer 3

Вы можете попробовать эти

1. Импорт OnChanges из углового основного пакета в вашем child component

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

2. Реализуйте свой дочерний класс как

   export class YourComponent implements OnChanges

3. Создать OnChanges метод, подобный

   ngOnChanges(changes:SimpleChanges){
     console.log(changes.your input property name);
    // implement your logic here  
   }
   

Всякий раз, когда у вас есть изменения в родительском компоненте, это влияет на дочерний компонент