如何扩展组件的功能？

Posted 2023-02-22

【中文标题】如何扩展组件的功能？

【英文标题】：How to extend functionality of component?

【发布时间】：2021-08-23 04:47:23

【问题描述】：

出现了一个有趣的问题。

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

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>

【问题讨论】：

我认为ToolPanel中的类型应该使用Enum作为数据类型，这个枚举应该包含所有不同的类型，如果type是强制的那么你可以去掉ngIf，

好的，但是如果需要，如何显示按钮和输入字段后？

实现应根据@input 处理其显示

这只是我对<app-formfield> 的假设。我没有得到你

Angular 中的动态模板怎么样？

【参考方案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

【讨论】：

负责创建按钮和表单元素的组件可以吗？

@Mamkad：如果您想创建一个带有动态组件的表单（？），您可以创建一个基础 ControlValueAccessor，然后使用表单所在的组件。如果您希望在 \ 方法之外处理按钮单击也可以正常工作，或者您将它与 @Output() onExecute: EventEmitter 或其他东西一起传递？

@Mamkad 顺便说一句。这仅基于我在 Angular 方面的工作，我从未学会如何以正确的方式进行操作，但我在尝试保持我的代码干燥时遇到了同样的问题。我学到的就是不要太严格。