Question

我正在使用PrimeNG UI Library's Editor component。当前版本是6.1.2。当页面加载并且编辑器包含一些内容时，问题就会出现，页面会自动滚动到编辑器并专注于此。如何禁用此自动对焦？我尝试使用简单的window.scroll(0,0)，但是在页面加载时它会先向下滚动然后向上滚动。

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

Answer 1

我们最终得到以下解决方案：必须添加使用方法Directive的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) {
    }
}

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

使用此伪指令看起来像：

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

Answer 2

您可以设置编辑器样式显示：无，直到页面加载完毕。加载后启用它，设置display：inline;如果您使用的是JavaScript，请使用setTimeout（）。

Answer 3

对任何认为有用的人：也可以通过使用公共变量控制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编辑器组件自动关注页面加载

3 个答案: