Как слушать, когда ChildComponent изменяется, а затем выполнять метод в ParentComponent?

Question

Я ищу чистое и эффективное решение в Angular 7 для выполнения метода в компоненте каждый раз, когда изменяется дочерний компонент.

Учитывая ParentComponent рендеринг ChildComponent, мне нужно знать, когда был изменен ChildComponent, и затем выполнить функцию в ParentComponent.

.ссылаясь на изменения в представлении или в любом свойстве класса Child.

Спасибо.

Answer 1

Ответ Prettyfly швы приемлемы, но есть альтернатива услуги.

Я считаю эту ссылку довольно наглядной.

Создайте наблюдаемую (например, субъект RXJS ) в службе и подпишитесь на нее в родительском компоненте, чтобы отслеживать ее изменения и обрабатывать их соответствующим образом.

В динамически создаваемом компоненте, в ловушке жизненного цикла onChanges или в любой функции, основанной на действии, вы можете инициировать наблюдаемое для выдачи изменений (которые затем родитель / любой другой подписчик будет «прослушивать» через подписку)

Просто не забудьте предоставить службу в родительском компоненте, чтобы родитель и его дочерние объекты совместно использовали один и тот же экземпляр службы или в app.module, чтобы сделать его глобальным для всего приложения.

Службы также обеспечивают совместное использование двоичных данных между родительскими, дочерними и родственными компонентами.

РЕДАКТИРОВАТЬ: Если вы не используете <ng-template> и компонент создается на лету, вы можете обнаружить его вручнуюего изменения путем передачи ссылки на 'componentRef' и вызова componentRef.changeDetectorRef.detectChanges();

Answer 2

Создайте EventEmitter в дочернем компоненте и отправляйте при его изменении.

Подпишитесь на источник событий из шаблона родительского компонента и выполняйте свою функцию каждый раз, когда он генерирует.

например

parent.component.html

<child-component (changeEmitter)="executeParentFunction()"> </child-component>

child.component.ts

@Output() changeEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();

ngOnChanges() {
    this.changeEmitter.emit(true);
}

ChildComponent предоставляется динамически, и наличие @Input для вызова не является опцией.Он должен быть прозрачным для дочернего компонента.

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