如何有条件地将属性插入 Angular 模板

Question

我有一个 angular 组件。

删除不需要的部分，这很像。

@Component({
  template: `
<a class="link-button" [href]="href">Link Button</a>
  `
})
export class LinkButtonComponent {
    @Input() href: string | null = '';
}

我有一个 CSS 选择器，用于链接到无处可去的灰色：

a.button-link:not([href]) {
    background-color:#A7A9AB;
    border-color:#A7A9AB;
}

但是，绑定空值会给出 href="null" 并且不会完全删除该属性。

如何有条件地绑定一个属性，使其不显示为 null？

Answer 1

使用[attr.href]，在空值的情况下属性将不存在：

<a class="link-button" [attr.href]="href">Link Button</a>

此外，您的代码中有一个拼写错误：button-link in CSS and link-button 在 HTML.

如何有条件地将属性插入 Angular 模板

How can I conditionally insert an atrribute into an Angular template

angular-template

angular