Исходная ситуация:
Существует четыре пустых стандартных компонента AComponent, BComponent и CComponent, созданные с помощью Angular CLI, а также MenuComponent с селектором app-menu.
MenuComponent встроен в шаблоны AComponent, BComponent и CComponent, но каждый имеет разные значения appAttribute (123, 456, 789):
<app-menu [appAttribute]="123" (attributeChangedEvent)="myValue=$event"></app-menu>
AttributeDirective, примененный к MenuComponent, принимает appAttribute, определенный в шаблонах A-CComponents, и должен сделать его доступным для MenuComponent посредством события. AttributeDirective работает хорошо и запускает пользовательское событие:
import {Directive, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Directive({
selector: '[appAttribute]'
})
export class AttributeDirective implements OnInit {
@Input('appAttribute') appAttribute: string;
@Output() attributeChangedEvent = new EventEmitter<boolean>();
constructor() {
}
ngOnInit(): void {
console.debug('attributeChangedEvent fired.');
this.attributeChangedEvent.emit(true);
}
}
Проблема, которую необходимо решить:
Как я могу добиться, чтобы событие было получено и оценено MenuComponent и что Мне не нужно вставлять myValue в каждый A-CComponent, как показано выше? myValue должен быть инкапсулирован только в MenuComponent, но сконфигурирован снаружи.
Short: Как передать данные из директивы в родительский компонент, но сконфигурирован дедовым компонентом в Angular 9.0.6?
Предыдущие попытки решения:
@Output и EventEmitter подход (см. Выше) - Использование
@HostBinding в AttributeDirective (отправка прошла успешно, но хост не получил никаких значений, целевые атрибуты остались нетронутыми)