Question

角度应用程序的路径如下：

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

父组件如下：

@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调用主题上的.next ChildComponents订阅此主题

角度父组件中提供的一个常用按钮供嵌套子组件使用

1 个答案: