Javascript 如何使带有#id的锚链按预期工作在角度

我的html内容是由后端的标记编译器生成的，我要做的是从服务器获取数据，动态呈现内容并显示

模拟降价内容可能如下：

测试1
测试2

在

foo.component.html

中，我使用

innerHTML

属性来显示内容，如下所示：

现在，这些锚定标记上的链接将变成类似于

localhost:4200/#test1

，并且无法按预期导航到这些元素的位置

因为html内容是由markdown编译器生成的，所以我不想更改html内容本身

实际上，这个

foo.component

将显示在浏览器中的url链接类似于

localhost:4200/post/post title

，因此这些锚定标记的预期url是

localhost:4200/post/post title#test1

我发现Angular的官方指南可以做我想做的事情，比如：（正确显示url并可以导航到元素位置）。他们如何实现这一点

依赖注入和变量声明

从'@angular/core'导入{renderr2}；
从“@angular/platform browser”导入{domsanizer，SafeHtml}；
建造师(
私有渲染器：渲染器2，
私有Domsanizer:Domsanizer
) {}
内容：安全HTML；
私有mockMarkdownContent=‘测试1’；

将字符串转换为DOM（）

const-template=this.renderer.createElement（'template'）；
template.innerHTML=this.mockMarkdownContent.trim（）；

修改锚点（）

常量固定节点：NodeList=template.content.querySelectorAll（'a'）； 常量锚点：节点[]=数组。从（锚点节点）； 用于（锚的常数锚）{ 常量href:string= （锚定为htmlanchoreElement.getAttribute（'href'）； 如果（href.indexOf（'#'）==0）{ this.renderer.setProperty( 锚， “href”， `/前缀/link/here${href}` ); } }

防止Angular清理HTML字符串（）

this.content=
this.domsanizer.bypassSecurityTrustHtml（template.innerHTML）；

在HTML模板中绑定已处理的内容

以某种方式或其他方式更改href链接。我的建议是通过监听route changes事件或

window.location.href

在组件中保存当前路由，并通过访问dom元素修改

href

属性。@AmitChigadani您的意思是更改类型脚本中的href是唯一的方法吗？实际上，我发现Angular的官方指南可以做我想做的事情，比如：（正确显示url并可以导航到元素位置）它们是如何实现的？您的后端以

href

的形式发送给您什么？是

localhost:4200/#test1

还是

#test1

@AmitChigadani我的后端向我发送从标记编译为html的内容，所以就是这样：

test1

，当我移动到Angular渲染html中的链接时，它显示

localhost:4200/#test1

，您可以尝试中给出的解决方案。它似乎有效，如中所示。