Angular 父组件中提供的一个常用按钮，供嵌套子级使用

Question

Angular 应用的路由如下：

componentRoutes: Routes = [
    {path: 'child',
    canActivate: [guardService],
    component: ParentComponent,
    children: [
        {path: '', component: nestedChildComponent1},
        {path: ':id', children: [
            {path: 'child2', component: nestedChildComponent2},
            {path: 'child3', component: nestedChildComponent3},
        ]},
    ]
},
];  

Parent组件如下：

@component({
  template: <div>
                <H3> This is Parent Component </H3> 
                <button id='button' (click)="buttonClickedHandler()"> click me </button>
            </div>
            <router-outlet></router-outlet>   <--- nested child components go here
})
export class ParentComponent implements OnInit, OnDestroy {
...
}  

ParentComponent 中的按钮在所有嵌套路由中是通用的。每个嵌套的子组件都必须为buttonclickedHandler 提供自己的实现。我该怎么办？我的嵌套组件应该扩展 ParentComponent 还是应该实现一个提供buttonclickedHandler 抽象 API 的接口？

我提到了abstract method in typescript 和creating interfaces for angular services 的帖子，我很困惑如何解决我的问题。

Answer 1

可能有很多方法并且都是有效的。我的处理方式： ParentComponent 提供带有 Subject 的服务。
ChildComponents 都扩展了一个需要这个服务的抽象类

父组件中的buttonClickHandler在Subject上调用.next ChildComponents 订阅了这个 Subject