我正在使用 Angular 6。我只想通过使用 innerHTML
创建一个动态路由.我尝试了以下代码,但它不起作用。
在组件文件中,我在构造函数里面写了如下代码:
this.anchor = "<a routerLink='login'>Dynamic Login</a>"
在模板文件中,我写了以下代码:<div [innerHtml]="anchor"></div>
最佳答案
在遇到与您相同的问题时,我使用了一种 hacky 解决方案,因为我没有找到更好的解决方案。在模板中我有 span
我设置的地方 innerHtml
该 html 来自服务器,它可能有 a
标签以及任何其他格式的 html 标签。所以解决方案是添加点击事件:
<span [innerHtml]="customHtml" (click)="processLinks($event)"></span>
在我们的 ts 文件中处理它们:customHtml: string = 'Hey <a href="/help/">this is</a> a link';
// Don't forget to import and inject the router
constructor(private router: Router) {}
// ...
processLinks(e) {
const element: HTMLElement = e.target;
if (element.nodeName === 'A') {
e.preventDefault();
const link = element.getAttribute('href');
this.router.navigate([link]);
}
}
请注意,您可以对此处的链接进行任何操作,如果需要,您可以在导航到链接之前添加一些条件或转换链接。希望能帮助到你。我知道这不是最好的解决方案,必须有更好的解决方案。但这就是我匆忙想到的。
关于angular - 如何在innerHTML中使用routerLink,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55350647/