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>