Angular9中经TS变量用innerHtml渲染的HTML内RouterLink失效如何解决

Angular的模板编译机制决定了，所有内置指令（包括RouterLink）、自定义组件、自定义指令，只有在组件模板编译阶段被框架扫描识别后，才会绑定对应的行为逻辑。
你通过原生innerHTMLAPI插入的HTML字符串，属于浏览器层面的直接DOM操作，全程不会经过Angular的模板编译流程，字符串里写的routerLink只会被当成无意义的普通HTML属性，自然无法触发路由跳转。

1. 优先采用模板条件渲染（最符合Angular开发规范） #

不要用原生DOM操作插入内容，直接把带路由的HTML写在组件静态模板里，用Angular的内置结构指令控制显隐，这种方式所有指令都会被正常解析，无兼容问题：

• 在app.component.ts里定义状态变量控制内容展示，删除原本直接操作innerHTML的逻辑：

// 替换原有DOM操作逻辑
showMainContent = true;

• 修改app.component.html，把原本要动态插入的内容直接写在目标容器里，用*ngIf控制显隐：

<mat-dialog-content>
  <section>
    <div class="container-fluid" id="mainText">
      <div *ngIf="showMainContent" class="row">
        <button class="button button-1 text-center mx-auto" 
          routerLink="/myForm">
          <i class="fas fa-hotel"></i>Go to the next page
        </button>
      </div>
    </div>
  </section>
</mat-dialog-content>

这种方式不需要手动操作DOM，性能和可维护性都是最优的。

2. 需动态生成内容时，使用Angular动态编译能力 #

如果业务场景确实需要动态生成带Angular指令的HTML片段，不能直接写死在静态模板里，禁止用原生innerHTML操作，需要借助Angular的CompilerAPI手动编译动态模板：

• 把原本要插入的HTML字符串作为动态模板内容
• 通过ViewContainerRef创建动态挂载点，经过Angular编译流程渲染内容
• 编译过程会自动识别模板里的RouterLink等指令，正常绑定路由跳转逻辑

3. 临时兜底的兼容方案 #

如果不想改动现有结构，也可以绕开RouterLink指令，直接通过路由服务实现跳转：

• 在app.component.ts中注入Router服务，定义统一的跳转方法：

import { Router } from '@angular/router';

constructor(private router: Router) {}

jumpToPath(path: string) {
  this.router.navigateByUrl(path);
}

• 替换动态字符串里的routerLink属性为自定义标识（比如data-target="/myForm"）
• 在通过innerHTML插入内容完成后，手动给对应按钮绑定原生click监听，触发上面定义的跳转方法。
  注意：这种方式是绕开Angular指令体系的临时方案，长期维护性差，不建议作为长期架构使用。

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