与RouterLink添加动态元素 [英] Add element with RouterLink dynamically

问题描述

当我把一个锚元素someweher在角2组件这样的，

When i put an anchor element in someweher in a angular 2 Component like this,

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

一切工作正常。当点击该链接，角路由器的路由我的目标组件。

everything is working fine. When clicking the link, the angular router routes me to the target component.

现在我想动态添加相同的链接。某处在我的应用程序，我有一个通知组件，这单一的责任是显示通知。

Now i would like to add the same link dynamically. Somewhere in my app i have a "notification component", which single responsibility is to display notifications.

的通知组件做这样的事情：

The notifications component does something like this:

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

其中notification.content在NotificationComponent类的字符串变量，并包含HTML来显示。

where notification.content is the string variable in the NotificationComponent class, and contains the HTML to display.

该notification.content变量可以包含像

The notification.content variable can contain something like

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

一切正常，并显示了我的屏幕上，但是当我点击动态链接没有任何反应？！

Everything works fine and shows up on my screen, but nothing happens when i click the dynamic link?!

有没有办法让这个动态添加链接???

Is there a way to let the angular router work with this dynamically added link???

PS。我知道DynamicComponentLoader，但我真的需要一个更不受限制的解决方案，在那里我可以发送各种HTML到我通知组件，以各种不同的环节......

ps. i know about DynamicComponentLoader, but i really need a more unrestricted solution where i can send all kinds of HTML to my notification component, with all kind of different links....

推荐答案

routerLink 是一个指令。没有为正在使用 [innerHTML的] 添加HTML创建指令和组件。这个HTML是不以任何方式角的过程。

routerLink is a directive. Directives and Components are not created for HTML that is added using [innerHTML]. This HTML is not process by Angular in any way.

推荐的方法是不使用 [innerHTML的] 不过的 DynamicComponentLoader ，你的包裹中的HTML组件，并动态地添加它。

The recommended way is to not use [innerHTML] but DynamicComponentLoader where you wrap the HTML in a component and add it dynamically.

这篇关于与RouterLink添加动态元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！