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

Posted 2023-03-13

【中文标题】Angular 4 在声明组件模板时应用属性（不呈现包装元素）

【英文标题】：Angular 4 apply attributes upon declaration to component template (do not render wrapping element)

【发布时间】：2018-04-27 23:04:14

【问题描述】：

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

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> 标记。有什么想法可以实现吗？

【参考方案1】：

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

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';

希望对你有帮助。

编辑：

【讨论】：

您好，谢谢您的回答。我不是真的在寻找这个。我真的不希望渲染任何包装元素。我希望在 html 中声明元素时放置的属性应用于模板中的按钮。也许我应该看看指令什么的。

几个小时前我刚刚读到了一些关于这方面的内容。您真正需要的是指令和 Ng-template，因为 ng-template 不会被渲染。祝你好运

【参考方案2】：

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

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