PrimeNG编辑器组件自动关注页面加载

Question

我正在使用PrimeNG UI库的Editor组件。当前版本是6.1.2。当页面被加载，并且编辑器包含一些内容时，该问题就会出现，页面会自动滚动到编辑器并专注于此。如何禁用此自动对焦？我尝试使用simple window.scroll(0,0)，但是在页面加载时看起来很奇怪，然后向下滚动然后向上滚动。

可能是PrimeNG中使用的羽毛笔文本编辑器的问题。无论如何，这里有什么解决方法？谢谢。

Answer 1

我们最终得到了以下解决方案：必须添加使用方法NgOnChanges的指令（因为问题不仅发生在页面加载时，还会发生在以编程方式更改内容时）。因此，在更改操作时，显示样式更改为“无”，然后在超时后显示元素。

指示：

import { Directive, Input, OnChanges, SimpleChange, ElementRef } from "@angular/core";

@Directive({
    selector: '[p-editor-model]'
})
export class PeAutoscrollFixDirective implements OnChanges {
    @Input("p-editor-model") content: string;

    ngOnChanges(changes: { [property: string]: SimpleChange }) {
        let change = changes["content"];
        let elemPosition = this.element.nativeElement.getBoundingClientRect().top + document.body.scrollTop;
        let clientHeight = document.documentElement.clientHeight;

        if (change.isFirstChange() || elemPosition > clientHeight)
        {
            this.element.nativeElement.style.display = 'none';
            setTimeout(() => {
                this.element.nativeElement.style.display = '';
            });
        }
    }

    constructor(private element: ElementRef) {
    }
}

需要将此指令添加到模块中作为声明和导出。

使用这个指令看起来像：

<p-editor [p-editor-model]="model" [(ngModel)]="model"></p-editor>