如何扩展组件的功能？

Question

出现了一个有趣的问题。

有一个组件可以监听如下主题：

export interface ToolPanel {
     title ?: string;
     buttons: Button [];
}

然后它只显示 ngFor 模板中的按钮。

现在您需要添加在按钮下显示选择列表或文本区域的功能吗？

如何正确扩展组件（模板）的功能？

模板为：

<div class="row" *ngFor="let tool of tools.toolPanels$">
     {{tool.title}}
     <!-- Here can be input, select or textarea -->
</div>

我想扩展接口：

export interface ToolPanel {
     title ?: string;
     buttons: Button [];
     type: 'formField'
}

然后签入模板：

<div class="row" *ngFor="let tool of tools.toolPanels$">
     {{tool.title}}
     <div *ngIf="tool.type === 'formField'">
       <app-formfield [type]="tool.type"></formfield>
     </div>
</div>

Answer 1

如果我理解正确的话，有多种方法可以实现您想要的，但它们都没有提供完整的组件扩展，因为您无法以角度扩展模板和装饰器。甚至有人说你不应该在 Angular 中使用继承，而应该使用服务来重用代码......

...但是要重用组件功能，您可以在基本组件中放置一个 标记，然后从外部管理附加内容，例如：

基本面板组件

<div class="row" *ngFor="let tool of tools.toolPanels$">
     {{tool.title}}
     <ng-content>
</div>

用法

<app-base-panel [tools]="tools">
     <!-- Here can be input, select or textarea -->
</app-base-panel>

或者您创建多个组件来扩展您的基础组件并拥有自己的模板。喜欢：

基本面板组件

@Directive()
export class BasePanelDirective {

  @Input() config: ToolPanel;

  constructor() { }

}

InputFieldPanelComponent...

@Component({
             selector:    'app-input-field-panel',
             templateUrl: './input-field-panel.component.html',
             styleUrls:   ['./input-field-panel.component.scss'],
           })
export class InputFieldPanelComponent extends BasePanelDirective {

}

这样你必须复制 html 代码，但可以重用 ts 函数。

或者你像以前一样使用 *ngIf 指令。

结论：

如果你只有几个地方应该使用这个组件，我会选择 方法。如果您经常使用这些组件，我会为每种方法使用自己的模板。如果更改足够小，您可以使用 *ngIf 方法。

阅读更多：

How to extend / inherit components?

https://ozak.medium.com/stop-repeating-yourself-in-angular-how-to-create-abstract-components-9726d43c99ab

https://github.com/angular/angular/issues/7968