Angular 6, a tag with href using #link links to base page not the current page

Question

The issue I am currently facing is that the link generated by the a tag links to the base page. As you can see in the image it links to

localhost:3000#hello

My goal is to get it to link to

localhost:3000/bodyText#hello

The a tag will come from an external source so my test example mimics that. I have so far been using innerHTML directive to put the external html in the html template.

Here is the component I am working with

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-test',
template: '<div [innerHTML]=html></div>',
 styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

constructor() { 
}

html = "<a href=\"#hello\" title=\"hello\">A tag </a> <a name=\"hello\" id= \"hello\"/> "

ngOnInit() {
}

}

Answer 1

我通过在HTML标记中添加点击处理程序，然后使用scrollIntoView和getElementById而不是使用标记来解决此问题。