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

Question

我正在使用 PrimeNG UI Library's Editor component。当前，版本为 6.1.2。问题出现在页面加载时，Editor有一些内容，页面自动滚动到editor并关注。如何禁用此自动对焦？我尝试使用简单的 window.scroll(0,0)，但在页面加载时向下滚动然后向上滚动时看起来很奇怪。

可能是 PrimeNG 中使用的 quill 文本编辑器的问题。无论如何，这里有任何解决方法吗？谢谢。

Answer 1

您可以设置编辑器样式 display:none，直到您的页面加载完毕。加载后启用它 set display:inline;如果您使用 javascript，请使用 setTimeout()。

Answer 2

我们最终得到了以下解决方案：必须添加 Directive which use method NgOnChanges（因为问题不仅发生在页面加载时，而且当内容以编程方式更改时也会发生）。因此，在更改操作时，显示样式更改为 'none'，然后在超时后显示元素。

指令：

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>

Answer 3

对于任何认为有用的人：也可以通过使用 public 变量来控制 readonly 属性来完成。将变量初始化为true，然后在onAfterViewInit.

中将其更改为false

component.ts:

import { OnInit, AfterViewInit } from '@angular/core';

export class myComponent implements OnInit, AfterViewInit {
    public tempReadOnly: boolean = true;

    ngAfterViewInit() {
        this.tempReadOnly = false;
    }
}

component.html:

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

如有必要，您甚至可以使用额外的 readonly 变量并像这样使用它：

<p-editor [readonly]="isReadOnly || tempReadOnly" [(ngModel)]="model"></p-editor>

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

PrimeNG editor component auto focus on page loading

quill

primeng

angular