在 Angular 中包装 html 标签绑定的 UI 组件

Question

我正在为我的应用程序围绕 Angular Material UI 创建一个“包装器”库，如本文所述：Should you wrap your UI components article

这个想法几乎是有一点抽象级别，这将使编写标准 UI 功能更容易，向 UI 开发人员隐藏底层实现的细节，并且可以轻松地重构大量的应用程序 UX 而无需编写大量代码.

我坚持的一件事是尝试包装没有自己专用标签但绑定到现有 HTML 标记的组件，例如绑定到 <button mat-button> 的 MatButton 组件

我想创建一个对应的组件<button my-button>，它的行为应该与<button mat-button mat-primary mat-raised-button> 完全相同。这在 Angular 1 中是非常微不足道的，但对于新的 Angular，我完全迷失了......请帮忙！

这是一个代码示例：Stack Blitz Button Example

Answer 1

为您创建了一个分叉的stackblitz。
在这里，我使用ViewContainerRef 来完全替换组件的初始 html 标记，并使用我们的材质按钮创建新的根视图。
请小心，因为在这种情况下，更改检测会变成手动操作。