Angular 角度2+；如何使用变量值调用指令？

我使用的是有角度的材质，常规的按钮是

x或
x

我有一个字符串变量，我们称它为“type”，它的值可以是“mat button”或“mat risted button”，我可以使用这个变量调用按钮的“directive”吗？比如：

<button [type]> x </button>

x

---

上面这个例子更像是我试图做的一个例子，但为了简单起见，问题是如何使用变量值“使用”指令。您可以使用ngSwitch创建模板

没有方向

和

实际上是同一个组件，只是应用了不同的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

，这是一个很好的答案，但我已经在这么做了。我想创建一些使用更多选项的情况，并寻求一种更简单的方法谢谢你的答案，但正如我在上一个答案中所说的，问题中的情况就是一个例子，我也需要一种方法来处理其他情况，如果可能的话，将变量值直接放在组件上，这同样只适用于这种情况，而不适用于变量应该触发指令的情况。但是在这种情况下，它起了作用并帮助了我，所以我将其标记为正确答案只是关于使用

[class]=“type”

绑定的一点警告-在这里可以正常工作，但这样做通常会删除所有已应用的类，并用绑定变量的值替换整个类列表。最好使用

[ngClass]=“type”

来避免这种情况，只需将类值添加到类列表中即可。@G.Tranter这就是我在这里的意图。

mat按钮

指令应用CSS样式，然后我需要将其替换为“type”。但是是的，当你不知道它是这样工作的时候，它常常是一个bug的来源。