Angular中如何让渲染的HTML链接实现内部路由而非页面刷新？

问题背景 #

我有一段来自服务器的HTML字符串，由于是遗留系统无法修改其格式。使用DomSanitizer的bypassSecurityTrustHtml函数将其渲染到DOM后，其中的<a>链接点击时会刷新整个页面，无法像系统内使用routerLink属性的链接那样实现无刷新内部路由跳转。需要配置渲染后的HTML内容，让链接启用内部路由而非页面刷新。

可行方案：事件委托拦截链接点击 #

因为通过[innerHTML]渲染的HTML不会被Angular编译，routerLink属性无法自动生效，所以可以通过事件委托的方式拦截链接点击事件，手动触发Angular路由导航：

• 在宿主组件中监听点击事件
• 判断点击目标是否为<a>标签
• 阻止默认页面跳转行为，使用Angular的Router服务执行内部导航

修改后的完整代码 #

import { Component, inject, HostListener } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, RouterLink, RouterOutlet, Router } from '@angular/router';
import 'zone.js';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: "foo",
  standalone: true,
  imports: [],
  template: `
    in foo!
    <div [innerHtml]="html"></div>
  `,
})
export class FooComponent {
  private sanitizer = inject(DomSanitizer);
  private router = inject(Router);
  html = '';

  ngOnInit() {
    const htmlFromTheServer = `<h2>foo title</h2><a href="/bar">goto bar!</a>`;

    this.html = this.sanitizer.bypassSecurityTrustHtml(
      htmlFromTheServer
    ) as string;
  }

  @HostListener('click', ['$event'])
  handleLinkClick(event: MouseEvent) {
    const target = event.target as HTMLElement;
    // 匹配点击的a标签（兼容嵌套元素的情况）
    const link = target.closest('a');
    if (link && link.getAttribute('href')) {
      event.preventDefault();
      const path = link.getAttribute('href')!;
      // 触发内部路由导航
      this.router.navigateByUrl(path);
    }
  }
}

@Component({
  selector: "bar",
  standalone: true,
  imports: [],
  template: `in bar!`,
})
export class BarComponent {}

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <h1>Hello from {{ name }}!</h1>
    
    <a routerLink="/foo">/foo</a> <br>
    <a routerLink="/bar">/bar</a> <br>
    <hr>
    <router-outlet></router-outlet>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [
    provideRouter([
      { path: "foo", component: FooComponent },
      { path: "bar", component: BarComponent },
    ]),
  ],
});

补充说明 #

• closest('a')可以处理点击<a>标签内嵌套元素的场景（比如<a href="/bar"><span>goto bar!</span></a>）
• 若需要区分内部路由和外部链接，可添加逻辑判断，比如仅处理以/开头的路径，外部链接保留默认跳转行为

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