Question

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

在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而不渲染。

请帮帮我。

Answer 1

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

Angular进程仅在编译时进行标记，但不在运行时进行标记。

有关解决方法，请参阅示例How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

为什么我的动态创建按钮不是使用Angular Material设计的？

1 个答案: