如何使用自定义按钮配置创建可重用组件

Question

所以目前我的组件有多个可配置选项的按钮：

test.component.html

<button
    *ngIf="cleaning"
    (click)="onCleaning()"
>
    {{'btn.cleaning'|translate}}
</button>

<button
    *ngIf="remove"
    (click)="onRemoving()"
>
    {{'btn.remove'|translate}}
</button>

test.component.ts

@Input() cleaning: boolean;
@Input() remove: boolean;
cleaningForm: FormGroup;

parent.component.html

<test [cleaning]="true" [remove]="false"></test>

想法是这个组件更大并且可重用，其中只有按钮和将被按下的操作发生变化，但它总是需要形式。

Is there other better solution to get such component, using ng-content and triggering form in parent component somehow?

Answer 1

不完全确定您是否要提供所有按钮及其（单击）方法，或者该组件是否应该仅以很少的逻辑自行执行给定的输入。后者很有趣，如果你想设置可重用样式的组件，比如带有给定按钮的弹出窗口。

您不仅可以提供元素，还可以提供它们的功能。

Parent.ts

export class ParentComponent implements OnInit {
  public cbFunction: (e: MouseEvent) => void //or whatever return value

  public ngOnInit(): void {
    this.cbFunction = ((e: MouseEvent) => { this.doFancyStuff(); }).bind(this);
  }
}

Parent.html

<child [callback]="cbFunction" name="cbFktBtn"></child>

Child.ts

export class ChildComonent {
   @Input() callback: (e: MouseEvent) => void;
   @Input() name: string;
}

Child.html

<button (click)="callback($event)">{{name}}</button>

这显然也适用于按钮阵列（或集合或映射或其他）。

如何使用自定义按钮配置创建可重用组件

How to create reusable component with custom buttons configuration

ng-template

viewchild

angular

angular-reactive-forms

ng-content