Question

我使用Angular 8创建一个指令，如下所示：

Directive({
  selector: '[appCustomName]'
})
export class CustomNameDirective implements OnChanges {
  @Input() type: string;

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    const element = this.elementRef.nativeElement;

    if (changes.type && changes.type.currentValue) {
      window.scroll({
        top: element.offsetTop,
        behavior: 'smooth'
      });
    }
  }
}

上面的代码不适用于window.scroll定位，但是当我setTimeout（）时，它可以正常工作。

Directive({
  selector: '[appCustomName]'
})
export class CustomNameDirective implements OnChanges {
  @Input() type: string;

  constructor(
    private elementRef: ElementRef,
    private renderer: Renderer2
  ) {}

  ngOnChanges(changes: SimpleChanges): void {
    const element = this.elementRef.nativeElement;

    if (changes.type && changes.type.currentValue) {
      setTimeout(() => {
        window.scroll({
          top: element.offsetTop,
          behavior: 'smooth'
        });
      });
    }
  }
}

能请您解释一下为什么吗？这里有魔术吗？

谢谢！

Answer 1

似乎您想滚动到元素的位置，以防类型改变。在这种情况下，以下代码将以更加有角度的方式做到这一点。

Directive({
    selector: '[appCustomName]'
})
export class CustomNameDirective {
    @Input() set type(_type: string) {
        window.scroll({
            top: this.elementRef.offsetTop,
            behavior: 'smooth'
        })
    }

    constructor(private elementRef: ElementRef) { }
}

Angular 8-为什么window.scroll在生命周期挂钩ngOnchanges（）上不起作用？

1 个答案: