Angular 9.0.6 如何将数据从指令传递到父组件，但由祖父组件配置？

Question

初始情况：

Angular CLI 创建了四个空的标准组件 AComponent、BComponent 和 CComponent，以及带有选择器 app-menu。

MenuComponent嵌入在AComponent、BComponent和CComponent的模板中，但每个都有不同的appAttribute值（123、456、 789):

<app-menu [appAttribute]="123" (attributeChangedEvent)="myValue=$event"></app-menu>

应用于 MenuComponent 的 AttributeDirective 采用 A-CComponents 模板中定义的 appAttribute 并且应该使它对 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 接收和评估，并且我不必像上面那样在每个 A-CComponent 中嵌入 myValue？ myValue应该只封装在MenuComponent里面，在外面配置。

简而言之：如何将数据从指令传递到父组件，但由 Angular 9.0.6 中的祖父组件配置？

以前的解决方案尝试：

@Output 和 EventEmitter 方法（见上文）
在AttributeDirective中使用@HostBinding（发送成功，但主机未收到任何值，目标属性未受影响）

Answer 1

A centralized event service 是一种在任何方向上建立跨组件通信的方法。

或者您可以将静态事件发射器放入指令或任何组件中。然后任何其他组件都可以订阅或发出。

Angular 9.0.6 如何将数据从指令传递到父组件，但由祖父组件配置？

How to pass data from directive to parent component, but configured by grandfather component in Angular 9.0.6?

typescript

angular-directive

angular

初始情况：

待解决问题：

以前的解决方案尝试：