创建具有无值属性的 Angular 组件答案

【问题标题】：Create Angular component with attribute without value创建具有无值属性的 Angular 组件
【发布时间】：2020-07-07 08:55:18
【问题描述】：

我最近开始学习 Angular 一个非常简单（我认为）但我找不到解决方案的问题是：

我想创建一个具有自定义属性但没有值的组件。喜欢这个：

<h1 attribute-without-value > Text <h1>

我尝试了不同的方式，但仍然没有我想要的。
我可以使用以下语法创建具有值的属性：[attr.attr-with-value]="value" 但并非没有。
这是我的一些实验（参考：https://stackblitz.com/edit/angular-sn94cl?embed=1&file=src/app/app.component.ts）：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template:  `
              <h1 {{nameAttr}} > doesn\'t work <h1>
              <h1 [attr.nameAttr] > also this doesn\'t work <h1>
              `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  nameAttr = 'attribute-without-value';
}

我该怎么办？

【问题讨论】：

我想问题是；为什么？
您的原始代码<h1 attribute-without-value > 应该可以工作并添加属性，如this stackblitz 所示。您需要动态属性名称吗？
是的，我希望它是动态的 :)

标签： javascript html angular angular2-template

【解决方案1】：

尝试一个指令。你尝试这样做的方式是行不通的。

https://angular.io/guide/attribute-directives

【讨论】：

【解决方案2】：

字符串插值 {{}} 应该放在 h1 元素的文本区域内。

<h1> {{nameAttr}} <h1>

如果您不希望它有值，您可以将 nameAttr 设置为 '' 或 null。

或者，如果您尝试将值传递给没有值的组件，那么您必须创建第二个组件，您可以将数据传递到该组件。 Mapping component attributes without a value

【讨论】：

我想要一个带有属性的 dom 元素，而不是带有textContent的元素

【解决方案3】：

我认为您实际上是在寻找 directives 而不是组件

【讨论】：