0

我正在联系返回完整 .html 文件的后端，该文件必须显示在 Angular 组件中。当我得到文件时，它导航到锚点，这在 Angular7 中不起作用，因为它试图导航到 localhost:4200/#。我想允许用户使用锚点进行导航。

我一直在尝试在不使用任何包的情况下执行此操作，使用 InnerHtml、OuterHtml、ElementRef、ViewContainerRef 并在后端解析数据。我尝试用 href="javascript:; (click)="navigate(#id)" 和 routerLink 替换： href="#id" 和碎片。

问题是这个新注入的代码由于 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"
                    });
                }
            }
        }
    }
4

1 回答 1

0

Angular 模板语法不是原生 html。您的 Angular cli 会将其编译为 html/js。所以你的运行时生成的模板不会感到愉悦。

// 我会对此发表评论，但缺少代表。

于 2019-05-06T12:47:44.720 回答