问题描述
当我像这样在 Angular 组件的某处放置一个锚元素时:
一切正常.单击链接时,Angular 路由器会导航到目标组件.
现在,我想动态添加相同的链接.在我的应用程序的某个地方,我有一个通知组件",它的唯一职责是显示通知.
通知组件做这样的事情:
<div [innerHTML]=notification.content"></div>
其中 notification.content
是 NotificationComponent
类中包含要显示的 HTML 的公共字符串变量.
notification.content
变量可以包含如下内容:
点击这个请
一切正常并显示在我的屏幕上,但当我点击动态链接时没有任何反应.
有没有办法让 Angular 路由器使用这个动态添加的链接?
PS:我知道 DynamicComponentLoader
,但我真的需要一个更不受限制的解决方案,我可以将各种 HTML 发送到我的通知组件,以及各种不同的链接.
routerLink
是一个指令.指令和组件不是为使用 [innerHTML]
添加的 HTML 创建的.Angular 不会以任何方式处理此 HTML.
推荐的方式是不使用 [innerHTML]
而是 ViewContainerRef.createComponent
将 HTML 包装在组件中并动态添加.
有关示例,请参阅 Angular 2 动态选项卡与用户-单击所选组件
When I put an anchor element in somewhere in an Angular component like this:
<a [routerLink]="['/LoggedIn/Profile']">Static Link</a>
everything is working fine. When clicking the link, the Angular router navigates to the target component.
Now, I would like to add the same link dynamically. Somewhere in my app I have a "notification component", its single responsibility is to display notifications.
The notification component does something like this:
<div [innerHTML]="notification.content"></div>
Where notification.content
is a public string variable in the NotificationComponent
class that contains the HTML to display.
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: 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
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.
The recommended way is to not use [innerHTML]
but ViewContainerRef.createComponent
where you wrap the HTML in a component and add it dynamically.
For an example see Angular 2 dynamic tabs with user-click chosen components
这篇关于使用 RouterLink 动态添加元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!