动态内容中的内部链接，无需在Angular中重新加载页面

Question

我正在使用Angular 5构建简单的博客，我有内部链接的问题。 其中一个组件是PostComponent，它从后端获取帖子内容并显示它。问题是帖子可以有内部链接，如：

<a href="/posts/another-post">

这样的链接导致完整的页面重新加载，因为我使用Angular，我想避免这种情况。我试图将锚点改为类似的东西：

<a routerLink="/posts/another-post">

但它也不起作用，可能是因为Angular没有处理html，因为它只是绑定到段落的文本：

<p [safeHtml]="(post$ | async)?.content"></p>

在AngularX中动态加载的内容中，如果没有页面重新加载，实现内部链接的最简单方法是什么？

Answer 1

您不能像这样使用routerLink指令，因为Angular不会解析动态HTML内容。您可以执行以下操作之一：

1. 创建动态组件，您需要显示的HTML将呈现为Angular组件。文件：https://angular.io/guide/dynamic-component-loader
每次更改内容后，
2. 解析呈现的DOM ，搜索相对链接，并将click事件链接到Router.navigate
3. 使用自定义元素-为内部链接定义自定义元素（例如<a-internal href="/posts/another-post">Another post</a>。该元素将由浏览器解析并链接到已定义的组件，该组件将使用Router.navigate on点击文档：https://angular.io/guide/elements

我个人会选择：

1. 如果我的HTML内容实际上应作为组件工作，并且此类内容的编辑者是Angular开发人员
2. 如果唯一关心的是内部链接，并且我确定我不需要任何其他活动内容
3. 如果我需要在HTML内容（例如小部件，按钮）中实现更多的魔术功能

对我来说，数字3也是最“角度化”的方式。