Angular 4 在组件模板声明时应用属性（不呈现包装元素）

Question

假设我想制作一个自定义按钮。所以我创建了一个组件

import { Component, Input } from '@angular/core';
@Component({
  selector: '[extended-button]',
  template: `<button (click)="onClick($event)"></button>`,
  styles: []
})
export class ExtendedButtonComponent {
  @Input() disabled: boolean;
}

当我使用此按钮的实例时，我希望在 HTML 中声明它时键入的属性适用于模板内的按钮：

<div extended-button class="some-nice-button"></div>

因此结果将是：

<button class="some-nice-button" (click)="onClick($event)"></button>

我真的不想呈现 <div> 标签。有什么想法可以实现吗？

Answer 1

我不确定这是否是您想要实现的，但请参阅下面的代码片段：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'custom-button',
  template: `<button [class]="className" (click)="onClick($event)>Custom Button</button>`
})
export class CustomButtonComponent {
   @Input() className: string;
}

然后当你想使用这个 custom-button 时，你可以像这样将它附加到另一个组件：

<custom-button [className]="someClassName"></custom-button>

然后在组件ts文件中，需要指定someClassName:

someClassName: string = 'someRandomClassName';

希望对您有所帮助。

编辑：

Answer 2

我不确定这是否是您想要实现的目标，但我认为您应该将选择器用作 html 标记，如下所示：

<div>
<extended-button></extended-button>
</div>

Angular 4 在组件模板声明时应用属性（不呈现包装元素）

Angular 4 apply attributes upon declaration to component template (do not render wrapping element)

angular-template

angular-components

angular