对不起，我没有意识到你回答了我的评论。 Angular 路由不是次要的，如果你不使用 Angular 模块，你最终只会得到一个 HTML/CSS/Typescript 应用程序。你至少需要 Angular 的 RouterModule 才能使用路由，因此，对 DOM 做它应该做的事情。
第一：
第二：
利用@ViewChild 指令更改您的innerHTML 属性并手动绑定到click 事件，因此将您的app.component.html 更改为
<div id="box" [innerHTML]="shouldbedivcontent" ></div>
到
<div #box id="box"></div>
现在，在您的app.component.ts 中，添加一个属性来保存对该“box”元素的引用，以便您以后可以使用它对 dom 进行一些更改：
@ViewChild('box') container: ElementRef;
实现 AfterViewInit，该钩子是您能够实际处理容器的地方，如果您尝试在 OnInit 中使用它，您将得到未定义，因为该组件的 html 尚未在 dom 中。
export class AppComponent implements AfterViewInit {
和
ngAfterViewInit() {
this.container.nativeElement.innerHTML = this.shouldbedivcontent;
this.container.nativeElement.addEventListener('click',
() => this.goto('bar')
);
}
将shouldbedivcontent 属性更改为：
'1) this is a click
<a (click)="goto("bar")">Click</a><br>
2)this is with routerlink
<a routerLink="" (click)="goto("bar")">Click</a><br>
3)This only works with href
<a href="goto/bar" title="bar">bar</a> and test'
到
'1) this is a click
<a id="link_1">Click</a><br>
2)this is with routerlink
<a [routerLink]="" (click)="goto(\'bar\')">Click</a><br>
3)This only works with href
<a href="goto/bar" title="bar">bar</a> and test'
即便如此，除非您自己应用一些样式，否则您仍然无法获得默认锚样式。
第三
您没有对HTML 进行清理，这可能很危险。 read more here
我的建议：
对于与您一起工作的其他人来说，您似乎有很多工作要做，而您可以像下面的示例中那样轻松做到这一点！
将您的 html 移动到您的 app.component.html:
<div id="box">
1) this is a click
<a (click)="goto('bar')">Click</a><br>
2)this is with routerlink
<a routerLink="" (click)="goto('bar')">Click</a><br>
3)This only works with href
<a href="goto/bar" title="bar">bar</a> and test
</div>
<p>Below is actual content</p>
您会注意到现在一切正常，除了没有 routerLink 或 href 的锚点，因为那不是链接。
编辑：
看看新的 stackblitz，我建议改变方法，在处理纯文本甚至一些简单的 html 时绑定到 innerHTML 是可以的，但不是绑定事件或路由逻辑的好选择。
Angular 的 Renderer2 提供了一系列方法来动态地将元素添加到 DOM。有了这个，你只需要一点点努力就可以把你从后端得到的那个简单的 html 转换成类似的东西（将此属性粘贴到你的代码中，以便在下面提供的其余代码中对其进行测试）：
public jsonHTML = [
{
tagName: '',
text: 'some text with click ',
attributes: {
}
},
{
tagName: 'a',
text: 'bar',
attributes: {
value: 'bar' // goto parameter
}
},
{
tagName: '',
text: ' some more text with click ',
attributes: {
}
},
{
tagName: 'a',
text: 'foo',
attributes: {
value: 'foo' // goto parameter
}
}
]
一旦你有了它，动态创建所有这些元素就更容易了：
这是针对您 Q1 中的代码的：
使用private r2: Renderer2 注入 Renderer2
并将AfterViewInit钩子中Q1相关代码替换为：
const parent = this.r2.createElement('div'); // container div to our stuff
this.jsonHTML.forEach((element) => {
const attributes = Object.keys(element.attributes);
const el = element.tagName && this.r2.createElement(element.tagName);
const text = this.r2.createText(element.text);
if (!el) { // when there's no tag to create we just create text directly into the div.
this.r2.appendChild(
parent,
text
);
} else { // otherwise we create it inside <a></a>
this.r2.appendChild(
el,
text
);
this.r2.appendChild(
parent,
el
);
}
if (attributes.length > 0) {
attributes.forEach((name) => {
if (el) {
this.r2.setAttribute(el, name, element.attributes[name]); // just the value attribute for now
if (name === 'value') {
this.r2.listen(el, 'click', () => {
this.goto(element.attributes[name]); // event binding with property "value" as parameter to navigate to
})
}
} else {
throw new Error('no html tag specified as element...');
}
})
}
})
this.r2.appendChild(this.container.nativeElement, parent); // div added to the DOM
不需要 html sanitizer 也不需要使用 routerLink 或者只需注入 Router 并导航到您想要的路由！对代码进行改进以使其符合您的需求，这至少应该是一个很好的起点
祝你好运！