时间戳

首页 > 解决方案 > Angular 11 - 将指令从自定义元素传递到子材质按钮

javascript - Angular 11 - 将指令从自定义元素传递到子材质按钮

问题描述

我们正在构建一个新的 Angular 应用程序。我们开始想要统一事物以提高清晰度。

在应用程序中，我们使用材质按钮，在文本的左侧或右侧都有一个图标。

所以我尝试创建一个名为的自定义元素ActionButton，其中包含一个按钮和一些图标和文本的跨度。我还希望按钮能够获取一些材质指令，例如mat-button,mat-button-raised等。

我的目标是这样的语法：

<app-action-button mat-raised-button icon="fa fa-plus" icon-position="left">Add stuff</app-action-button>

这将呈现为：

<button mat-raised-button class="flex flex-row justify-center items-center">
    <span class="fa fa-plus"></span>
    <span>Add stuff</span>
</button>

我尝试设置mat-raised-button为属性，例如buttonType，但它要么呈现为

<button buttonType="mat-raised-button"></button>

这不起作用，或者告诉我"buttonType" is not a valid attribute for button。

我怎样才能做到这一点？

标签： javascriptangularcomponentselement

解决方案

推荐阅读