Создать Angular компонент с атрибутом без значения

Question

Я начал изучать Angular Недавно одна очень простая (я думаю) проблема, решение которой я не могу найти, заключается в следующем:

Я хочу создать Компонент с пользовательским атрибутом без ценность. Как этот:

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

Я пытался по-другому, но все же, у меня нет того, что я хочу.
Я могу создать атрибут со значением, используя этот синтаксис: [attr.attr-with-value]="value" но не без.
Вот некоторые из моих экспериментов (ref: 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';
}

Как мне это сделать?

Answer 1

Строковая интерполяция {{}} должна быть помещена в текстовую область элемента h1.

<h1> {{nameAttr}} <h1>

Если вы не хотите, чтобы оно имело значение, вы можете просто установить nameAttr в ' 'или null.

Или, если вы пытаетесь передать значение в компонент без значения, вам придется создать 2-й компонент, в который вы можете передать данные. Отображение атрибутов компонента без значения

Answer 2

Попробуйте директиву. То, как вы пытаетесь это сделать, не сработает.

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

Answer 3

Я думаю, что вы на самом деле ищете директивы не компоненты