Angular中HTML注入代码改造求助：无法加载CSS及动画

你的问题出在直接通过innerHTML插入Angular Material组件的HTML字符串——Angular不会编译这种方式插入的内容，所以mat-button、mat-expansion-panel这类指令不会生效，对应的样式和动画自然也无法加载。

正确的做法：用Angular内置模板语法渲染 #

完全避免手动DOM操作，改用Angular的*ngFor和异步管道来渲染数据，这是Angular推荐的组件渲染方式，能确保所有指令和样式正常工作。

步骤1：组件类中处理数据

把数据转为Observable，用异步管道在模板中订阅：

import { Component, OnInit } from '@angular/core';
import { DataService } from './your-data-service-path';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  // 定义Observable存储数据
  things$!: Observable<any[]>;

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    // 直接赋值Observable，避免手动subscribe
    this.things$ = this.dataService.getThings();
  }

  // 辅助方法：在模板中处理Object.entries
  objectEntries(obj: any) {
    return Object.entries(obj);
  }
}

步骤2：模板中渲染组件

用*ngFor遍历数据，直接使用Angular Material组件：

<div id="nav-list">
  <mat-expansion-panel *ngFor="let thing of things$ | async">
    <mat-expansion-panel-header>
      {{ thing.title }}
    </mat-expansion-panel-header>
    <ng-template matExpansionPanelContent>
      <!-- 遍历actions -->
      <button mat-button *ngFor="let action of objectEntries(thing.actions)">
        {{ action[0] }}
      </button>
      <!-- 遍历properties -->
      <button mat-button *ngFor="let property of objectEntries(thing.properties)">
        {{ property[0] }}
      </button>
    </ng-template>
  </mat-expansion-panel>
</div>

为什么原来的写法失效？ #

Angular的组件和指令需要经过编译器处理才能生效，手动通过innerHTML插入的HTML字符串只是纯文本，不会触发Angular的编译流程——mat-button这类属性指令不会被识别，Material组件的样式也不会绑定到这些元素上，自然看不到样式和动画效果。

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