routerLink 在带有 angular2&4.0.0+ 的 innerHTML 中不起作用答案

【问题标题】：routerLink not working in innerHTML with angular2&4.0.0+routerLink 在带有 angular2&4.0.0+ 的 innerHTML 中不起作用
【发布时间】：2017-04-01 05:52:25
【问题描述】：

我正在使用：[angular-cli=1.0.0+ node=7.7.4+ angular=4.0.0+] 在我的 html 页面中，我使用代码 <div [innerHTML]="htmlWrite"></div> ts：htmlWrite='<a href="#" [routerLink]="/user/list"></a>' 但是当我使用“npm start”开始我的服务时，在 html 中我只看到<a href="#"></a>，没有与“/user/list”的链接。我搜索了很多关于这个的答案，我尝试了很多次但仍然失败，你能告诉我如何解决这个问题吗？通过使用 NgComponentOutlet？还是其他人？请告诉我详细信息。谢谢。 PS:angular2(4.0.0+)

【问题讨论】：

分享您的代码。从中删除 href
试过了没用
html:div [innerHTML]="htmlWrite"></div>ts:import {Component} from '@angular/core'; @Component({ selector: 'home-sidebar', templateUrl: 'sidebar.html', styleUrls: ['sidebar.css'] }) export class SidebarComponent { constructor(){ this.getMenuList(JSON.parse(window.sessionStorage.getItem('menuList'))); } htmlWrite:string = ''; getMenuList(menuList:any):void{ // some operate } }

标签： angular innerhtml routerlink

【解决方案1】：

根据this article.

[innerHTML] 不支持角度绑定和指令。

一个解决方案（取决于你想要实现的目标）如果你有一个你想要条件显示的 html 链接列表，那就是硬编码你的 html 并使用布尔值在每个 div 上用*ngIf 显示它们/链接。

如果您尝试从服务器获取 html，请尝试发送一些 JSON，并用变量填充预先编写的 html 行。

【讨论】：

【解决方案2】：

您可以使用以下简单方法在您的锚标记上添加路由

https://stackoverflow.com/a/60413820/7540573

它将在不重新加载整个页面的情况下路由视图。

【讨论】：

【解决方案3】：

用简单的方式编写代码。

<div> <a routerLink = "user/list"></a> </div>

【讨论】：

这只是一个例子，我必须这样写

【解决方案4】：

使用 routerlink 时，您不需要在 <a> 标签中添加 href。

之前

<a href="#" routerLink="/user/list"></a>

之后

<a routerLink="/user/list"></a>

【讨论】：