html - 带有 routerLink 的 Angular/Typescript 文本

Question

更新的问题更清晰：

需要在Angular HTML中将一些文本和链接显示为innerHTML（来自服务/数据库的数据），当用户点击时，它应该转到Typescript并以编程方式导航router.navigate

此外，如何从 @ViewChild/ElementRef 添加 DomSanitizer

在下面的代码中添加了所有示例

这是更新的 stackblitz 代码

如 angular.io 的截图所示，一些文本和一些链接

标签： htmlangulartypescriptinnerhtmlangular-router

Answer 1

你有一个CSS问题。

1. <a href="something"></a>看起来像一个链接
2. <a [routerLink]="something"></a>看起来像一个链接，因为如果您检查 HTML，它实际上会href添加一个属性，因为routerLink
3. <a (click)="goTo()"></a>看起来不像链接，因为没有href

Chrome 和 Safari 的默认用户代理 css 不会没有样式<a>（href尚未确认 Firefox，但我确信它可能）。对于像引导程序这样的框架也是如此。

将 CSS 移至全局而不是 app.css 的更新 stackblitz https://stackblitz.com/edit/angular-ivy-kkgmkc?embed=1&file=src/styles.css

这会将所有链接的样式设置为默认的蓝色，或者 -webkit-link 如果该浏览器支持它。如果您希望它在整个应用程序中运行，它应该在您的 global.css 文件中。

a {
  color: rgb(0, 0, 238);
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}