为何Angular 5中动态创建的按钮未应用Angular Material样式？

这个问题我之前也碰到过！直接用 Renderer 插入纯 HTML 确实会踩这个坑——因为 Angular 不会去编译你插入的字符串内容，mat-raised-button 这类 Material 指令根本不会被识别，自然就只有普通按钮的样子。下面给你两种可行的解决思路：

方案一：用 *ngIf 控制显示隐藏（简单场景首选） #

如果只是需要一个悬停显示的按钮，完全不需要手动操作 DOM，用 Angular 的内置指令就能搞定，代码简洁还不容易出错：

父组件模板 #

<div class="hover-area" (mouseenter)="isHovered = true" (mouseleave)="isHovered = false">
  鼠标悬停这里显示按钮
  <!-- Material 按钮通过 *ngIf 控制显示 -->
  <button *ngIf="isHovered" mat-raised-button color="primary">悬停触发的按钮</button>
</div>

父组件逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-hover-parent',
  templateUrl: './hover-parent.component.html'
})
export class HoverParentComponent {
  isHovered = false;
}

这种方式完全符合 Angular 的数据驱动理念，Material 组件会被正常编译，样式和功能都能正常生效。

方案二：动态创建 Angular 组件（复杂场景通用） #

如果你确实需要动态创建组件（比如按钮的内容/样式需要动态生成），就得用 Angular 的组件工厂来创建，而不是直接插 HTML：

步骤1：创建独立的 Material 按钮组件 #

先把要动态显示的按钮封装成一个组件，确保它能正常使用 Material 样式：

// hover-button.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-hover-btn',
  template: `<button mat-raised-button [color]="buttonColor">{{ buttonText }}</button>`
})
export class HoverButtonComponent {
  // 可以定义输入属性，方便父组件传递参数
  buttonText = '动态创建的按钮';
  buttonColor = 'accent';
}

步骤2：父组件中动态创建/销毁组件 #

在父组件里通过 ComponentFactoryResolver 来动态生成组件实例：

// hover-parent.component.ts
import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentRef, OnDestroy } from '@angular/core';
import { HoverButtonComponent } from './hover-button.component';

@Component({
  selector: 'app-hover-parent',
  templateUrl: './hover-parent.component.html'
})
export class HoverParentComponent implements OnDestroy {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;
  private buttonComponentRef?: ComponentRef<HoverButtonComponent>;

  constructor(private resolver: ComponentFactoryResolver) {}

  showButton(): void {
    // 避免重复创建组件
    if (this.buttonComponentRef) return;
    
    // 创建组件工厂
    const factory = this.resolver.resolveComponentFactory(HoverButtonComponent);
    // 在容器中生成组件实例
    this.buttonComponentRef = this.container.createComponent(factory);
    
    // 可以动态设置组件的输入属性
    this.buttonComponentRef.instance.buttonText = '悬停显示的动态按钮';
    this.buttonComponentRef.instance.buttonColor = 'primary';
  }

  hideButton(): void {
    if (this.buttonComponentRef) {
      // 销毁组件，清理内存
      this.buttonComponentRef.destroy();
      this.buttonComponentRef = undefined;
    }
  }

  // 组件销毁时确保清理动态组件
  ngOnDestroy(): void {
    this.hideButton();
  }
}

步骤3：父组件模板配置容器 #

<div class="hover-area" (mouseenter)="showButton()" (mouseleave)="hideButton()">
  鼠标悬停这里显示动态按钮
  <!-- 动态组件的容器 -->
  <ng-template #componentContainer></ng-template>
</div>

步骤4：模块配置（关键！） #

在你的模块中，必须声明这个动态组件，并且在 entryComponents 中注册（Angular 5 要求动态组件必须在这里声明）：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material/button';

import { AppComponent } from './app.component';
import { HoverParentComponent } from './hover-parent.component';
import { HoverButtonComponent } from './hover-button.component';

@NgModule({
  declarations: [
    AppComponent,
    HoverParentComponent,
    HoverButtonComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Material 必须依赖动画模块
    MatButtonModule
  ],
  entryComponents: [HoverButtonComponent], // Angular 5 需注册动态组件
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么直接插 HTML 不行？ #

Angular 的渲染机制是基于组件编译的，用 Renderer 插入的纯 HTML 字符串不会经过 Angular 的编译流程，mat-raised-button 这类指令不会被解析，Material 的样式也不会绑定到元素上，所以最终只会显示成原生按钮。而动态创建组件的方式，会让 Angular 完整处理组件的编译、指令解析和样式绑定，自然就能正常显示 Material 样式了。

内容的提问来源于stack exchange，提问作者Matthew