Как сделать так, чтобы якорная ссылка с #id работала как положено в Angular - PullRequest
Новая
       16

Как сделать так, чтобы якорная ссылка с #id работала как положено в Angular

0 голосов
/ 18 мая 2019

Мое html-содержимое генерируется компилятором уценки в бэкэнде, и я хочу, чтобы угловые данные получали с сервера, динамически отображали содержимое и отображали его.

Имитация содержимого уценки может бытькак это: 

<h1 id="test1">Test 1<a href="#test1" title="Permanent link">&para;</a></h1>
<h1 id="test2">Test 2<a href="#test2" title="Permanent link">&para;</a></h1>

В foo.component.html я использую атрибут innerHTML для отображения содержимого, например так: 

<div [innerHTML]="mock_markdown_content"></div>

Теперь ссылки на эти теги привязки станут вещамикак localhost:4200/#test1, и не может перейти к расположению этих элементов, как ожидалось.

Поскольку HTML-контент генерируется компилятором уценки, я не хочу изменять сам HTML-контент.

На самом деле, URL-ссылка, что это foo.component будет отображаться в браузере, похожа на localhost:4200/post/post-title, поэтому ожидаемый URL-адрес этих тегов привязки равен localhost:4200/post/post-title#test1.

Я обнаружил, что официальное руководство по Angularможет делать то, что я хочу, например: https://angular.io/guide/router#overview (правильно отображать URL и может перемещаться к позиции элемента).Как они это реализуют?

1 Ответ

0 голосов
/ 20 мая 2019
  1. Внедрение зависимостей и объявление переменных 
import { Renderer2 } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(
  private renderer: Renderer2,
  private domSanitizer: DomSanitizer
) {}

content: SafeHtml;
private mockMarkdownContent = '<h1 id="test1">Test 1<a href="#test1" title="Permanent link">&para;</a></h1>';
Преобразование строки в DOM ( ссылка ) 
const template = this.renderer.createElement('template');
template.innerHTML = this.mockMarkdownContent.trim();
Изменить якоря ( ссылка ) 
const anchorNodes: NodeList = template.content.querySelectorAll('a');
const anchors: Node[] = Array.from(anchorNodes);
for (const anchor of anchors) {
  const href: string = 
    (anchor as HTMLAnchorElement).getAttribute('href');
  if (href.indexOf('#') === 0) {
    this.renderer.setProperty(
      anchor,
      'href',
      `/prefix/link/here${href}`
     );
  }
}
Запретить Angular санацию строки HTML ( ссылка ) 
this.content = 
  this.domSanitizer.bypassSecurityTrustHtml(template.innerHTML);
Привязка обработанного содержимого в шаблоне HTML 
<div [innerHTML]="content"></div>
...