Angular7 -> Перейти к id=#article-1 в динамически загружаемом HTML

Я связываюсь с серверной частью, которая возвращает полный файл .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"
                    });
                }
            }
        }
    }

person Antonio Mikulić    schedule 06.05.2019    source источник


Ответы (1)


Синтаксис шаблона Angular не является родным HTML. Ваш angular cli скомпилирует его в html/js. Таким образом, ваш шаблон, сгенерированный во время выполнения, не почувствует удовольствия.

// Я бы прокомментировал это, но не хватает представителя.

person Christoph    schedule 06.05.2019
comment
Да, в конце концов я только что добавил (щелчок)=findGivenId(), я отредактирую свой пост с новым кодом. - person Antonio Mikulić; 10.05.2019