import { Directive, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appRouterLinkInnerHtml]'
})
export class RouterLinkInnerHtmlDirective implements AfterViewInit {
  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    const links = this.el.nativeElement.querySelectorAll('a');
    links.forEach((link: HTMLAnchorElement) => {
      const href = link.getAttribute('href');
      if (href && !link.getAttribute('routerLink')) {
        link.setAttribute('routerLink', href);
      }
    });
  }
}

2. 在需要解析 innerHtml 的组件中，将该指令应用到包含 innerHtml 的元素上。

在上述示例中，htmlContent 是一个包含 HTML 内容的字符串，它可能包含锚点元素。应用了 appRouterLinkInnerHtml 指令的 div 元素会解析 innerHtml 内容，并为其中的所有锚点元素添加 routerLink 属性。

这样，对于 innerHtml 中的锚点元素，就可以正常绑定到 Angular 的路由导航中了。