Question

我正在使用材质角度，而常规按钮是

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

我有一个字符串变量，我们称之为'type'，它的值可以是'mat-button'或'mat-raised-button'，我可以使用这个变量调用按钮的'指令'吗？类似的东西：

<button [type]> x </button>

上面这个例子更像是我想要做的一个例子，但为了简单起见，问题是如何使用变量值“使用”指令

Answer 1

您可以使用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>

Answer 2

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

type的值可以是字符串mat-button或mat-raised-button。

Angular 2+如何使用变量值来调用指令？

2 个答案: