为什么我的动态创建的按钮没有使用 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) 切换它。如果您需要帮助，请显示实际情况的代码。

标签： angular material-design angular-material angular5 angular2-directives

【解决方案1】：

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

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

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

【讨论】：