Я связываюсь с серверной частью, которая возвращает полный файл .html, который должен отображаться в компоненте Angular. Когда я получаю файл, в нем есть переходы к якорям, которые не работают в Angular7, поскольку он пытается перейти на localhost: 4200/#. Я хочу разрешить пользователям использовать якоря для навигации.
Я пытался сделать это без использования каких-либо пакетов, используя InnerHtml, OuterHtml, ElementRef, ViewContainerRef и анализируя данные на Backend. Я попытался заменить: href="#id" на href="javascript:; (click)="navigate(#id)" и routerLink на фрагментацию.
Проблема в том, что этот недавно введенный код не работает из-за очистки DOM.
@ViewChild('dynamic', { read: ElementRef }) dynamic: ElementRef;
private loadHtmlData(data: string) {
// Only take body
data = data.split("<body")[1].split(">").slice(1).join(">").split("</body>")[0];
let pageRegex = /(href="#page-)/g;
data = data.replace(pageRegex, 'href="javascript:;" [routerLink]="[]" fragment="page-');
this.fullHtml = data;
this.dynamic.nativeElement.outerHTML = data;
this.htmlLoaded = true;
}
<!-- Direct Injection
<div [innerHTML]="fullHtml | sanitizeHtml"
*ngIf="htmlLoaded"></div>
-->
<div #dynamic>
</div>
Ожидалось, что нажатие на недавно сформированную ссылку приведет меня к этому якорю.
Исправил так:
<div [innerHTML]="navigationHtml | sanitizeHtml: 'html'"
(click)="loadedHtmlClicked($event)"
*ngIf="htmlLoaded">
</div>
loadedHtmlClicked(event) {
if (event && event.target && event.target.attributes) {
let attributes: NamedNodeMap = event.target.attributes;
let fragment = attributes.getNamedItem('fragment');
if (fragment && this.fragment != fragment.value) {
this.router.navigate([], { fragment: fragment.value });
let element = document.getElementById(fragment.value);
if (element) {
// Allows for some padding above element
window.scrollTo({
top: element.offsetTop + 60,
behavior: "smooth"
});
}
}
}
}