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

Posted 2023-03-13

【中文标题】在 Angular 中包装 html 标签绑定的 UI 组件

【英文标题】：Wrapping html tag bound UI Components in Angular

【发布时间】：2020-03-19 21:26:08

【问题描述】：

我正在为我的应用程序围绕 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

【问题讨论】：

为此，您可以使用“属性指令”：angular.io/guide/…

不，不幸的是属性指令不能动态绑定组件：***.com/questions/34260996/…

这也是我的第一个想法，这也是我在 Angular 1 中的做法...

如果你打算使用 ivy 作为编译器，你可以使用 HOCs 来提供它。一个example

【参考方案1】：

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

【讨论】：

谢谢，这是朝着正确方向迈出的一步 - 但是我更希望在 github.com/angular/components/blob/master/src/material/button/… 中使用类似材料按钮的东西，它们将 标签嵌入到 而不是明确地将它放在模板上-因为在这种情况下，我不仅需要进行手动更改检测，还需要复制所有回调，例如该标签上的（单击）...无论如何，如果没有更多的接受者，我将分配赏金给你，谢谢。