Angular 2+ Как использовать значение переменной для вызова директивы?

Question

Я использую материал угловой, и обычная кнопка:

<button mat-button> x </button> or <button mat-raised-button> x </button>

У меня есть строковая переменная, давайте назовем ее «тип», и ее значение может быть «мат»Кнопка или циновка с поднятой кнопкой, могу ли я вызвать «директиву» кнопки, используя эту переменную?что-то вроде:

<button [type]> x </button>

Этот случай выше больше похож на пример того, что я пытаюсь сделать, но для простоты вопрос состоит в том, как «использовать» директиву, используя значение переменной

Answer 1

<button mat-button> и <button mat-raised-button> на самом деле являются одним и тем же компонентом с применением только разных стилей CSS.

Вы можете просто изменить стиль CSS вручную, чтобы изменить внешний вид кнопки.

<button mat-button [class.mat-button]="!raised" [class.mat-raised-button]="raised">Hello World</button>

Обновлено:

<button mat-button [class]="type">Hello World</button>

Где значение типа может быть строкой mat-button или mat-raised-button.

Answer 2

вы можете использовать ngSwitch для создания вашего шаблона

<ng-container [ngSwitch]="type">
  <ng-template [ngSwitchCase]= "'mat-button'">
    <button mat-button></button>
  </ng-template>
  <ng-template [ngSwitchCase]= "'mat-raised-button'">
     <button mat-raised-button></button>
  </ng-template>
  <ng-template ngSwitchDefault> No Direction </ng-template>
</ng-container>