时间戳

首页 > 解决方案 > Angular 9：创建使用其他标准指令的自定义指令

html - Angular 9：创建使用其他标准指令的自定义指令

问题描述

我正在开发一个基于 Angular/Material 9 的小框架。我想创建自定义指令，将标准 Material 指令应用于其宿主元素。对于某些 UI 元素，我更喜欢使用指令而不是创建自定义包装组件（使用 ng-content）。例如，对于按钮，我想使用这样的“自定义按钮”指令：

<button type="button" custom-button>Hello world!</button>

该指令应将标准 Material 指令（以及其他一些属性）应用于宿主元素的按钮。呈现的 HTML 按钮应为：

<button type="button" custom-button mat-button mat-raised-button color="accent">Hello world!</button>

我知道如何设置属性/属性，但显然该按钮不像“真正的”垫子按钮（它没有由 Material 添加的自定义内部元素，也没有用于波纹效果）。我对 Angular 很陌生，所以我搜索了很多答案。但我只发现了非常复杂或过时的解决方案（AngularJS）。有什么帮助吗？

标签： htmlangularangular-materialdirective

解决方案

推荐阅读