使用RouterLink动态添加元素

Question

当我把一个锚元素放在像这样的角度2组件中的某个部分时,

<a [routerLink]="['/LoggedIn/Profile']">Static Link</a>

一切都很好.单击链接时,角度路由器将我路由到目标组件.

现在我想动态添加相同的链接.在我的应用程序的某个地方,我有一个"通知组件",其唯一的责任是显示通知.

通知组件执行如下操作:

  <div [innerHTML]="notification.content"></div>

其中notification.content是NotificationComponent类中的字符串变量,包含要显示的HTML.

notification.content变量可以包含类似的内容

 <div>Click on this <a [routerLink]="['/LoggedIn/Profile']">Dynamic Link</a> please</div>

一切正常,并显示在我的屏幕上,但当我点击动态链接时没有任何反应？!

有没有办法让角度路由器使用这个动态添加的链接???

PS.我知道DynamicComponentLoader,但我真的需要一个更无限制的解决方案,我可以将各种HTML发送到我的通知组件,具有各种不同的链接....

Answer 1

内容已经渲染后无法添加routerLink，但您仍然可以达到预期的效果：

1. 用动态数据创建一个 href 并给它一个类：

   `<a class="routerlink" href="${someDynamicUrl}">${someDynamicValue}</a>`
   

2. 向 app.component 添加一个 HostListener 来监听点击并使用路由器导航

   @HostListener('document:click', ['$event'])
   public handleClick(event: Event): void {
    if (event.target instanceof HTMLAnchorElement) {
      const element = event.target as HTMLAnchorElement;
      if (element.className === 'routerlink') {
        event.preventDefault();
        const route = element?.getAttribute('href');
        if (route) {
          this.router.navigate([`/${route}`]);
        }
      }
    }
   

   }

Answer 2

routerLink是一个指令。不会为使用添加的 HTML 创建指令和组件[innerHTML]。Angular 不会以任何方式处理此 HTML。

推荐的方法是不使用[innerHTML]DynamicComponentLoader ，ViewContainerRef.createComponent将 HTML 包装在组件中并动态添加它。

有关示例，请参阅带有用户单击所选组件的 Angular 2 动态选项卡