为啥我的动态创建的按钮没有使用 Angular Material 进行样式设置？

Posted 2023-02-22

【中文标题】为啥我的动态创建的按钮没有使用 Angular Material 进行样式设置？

【英文标题】：Why isn't my dynamically-created button being styled with Angular Material?为什么我的动态创建的按钮没有使用 Angular Material 进行样式设置？

【发布时间】：2018-08-01 12:04:49

【问题描述】：

我正在尝试创建在鼠标悬停时显示按钮的指令。

在 angularJS 中，我通过以下方式创建了一个元素：

    angular.element("<button mat-button></button>");

在 angular5 中，我尝试通过以下方式创建元素：

button: any;

constructor(private el: ElementRef,
            private renderer: Renderer2) 
    this.createButton();


private createButton()
    this.button = this.renderer.createElement("button");
    this.renderer.setAttribute(this.button,"mat-fab", "");
    this.renderer.addClass(this.button, "mat-fab");
    this.renderer.appendChild(this.el.nativeElement, this.button);

但不幸的是，按钮看起来像普通按钮，而不是材料设计按钮。看起来渲染器不渲染按钮，而只是插入一些没有渲染的 html。

请帮助我。

【问题讨论】：

在一个元素上投掷属性不会使它们成为 Material 元素。它们需要由 AM 指令处理。无论如何，*ngIf 状态切换不是更好的方法吗？只需使用(mouseover) 切换它。如果您需要帮助，请显示实际情况的代码。

【参考方案1】：

Angular 不会处理任何动态添加的 HTML。 它只是逐字添加它并忽略绑定语法或组件或指令选择器。

Angular 只在编译时处理标记，而不是在运行时。

如需解决方法，请参阅 How can I use/create dynamic template to compile dynamic Component with Angular 2.0?