angular - 我想重用html标记为我自己的并扩展模板

Question

假设我有 component 。

template: 
      <button class="my-own-button" (click)='handelClick($event)' [type]='this.type'>
        <app-logo [src]="this.src">
        </app-logo>
        <ng-content>
        </ng-content>
      </button>
  
class MyButtonComponent {
  @Input() src: string = "";
  @Input() type: string = "button";
  @Output() click = new EventEmitter<any>();

  handelClick(event: any){
    this.click.emit(event);
  }
}

而且我仍然需要显式定义在 native 中已经存在的点击输出和类型输入道具。我只想添加一个 src 输入属性并在模板中提供一些额外的内容。

有什么办法可以解决吗？如果没有，您能否提出解决问题的最佳方法？

标签： angular

Answer 1

尝试将按钮组件的选择器更改为属性选择器而不是元素选择器。这应该有助于在您的组件中保留本机按钮标签，同时实际上是一个 Angular 组件。Angular Material为其按钮使用属性选择器。

使用[my-button]or[myButton]代替my-button作为组件选择器。