typescript Angular 6:类型错误:无法读取属性“scrollIntoView”,该属性为空

rqqzpn5f  于 2023-01-18  发布在  TypeScript
关注(0)|答案(4)|浏览(228)

我尝试在Angular 6中测试scrollIntoView(),但遇到此错误--〉TypeError: Cannot read property 'scrollIntoView' of null
规格:

beforeEach(() => {
    fixture = TestBed.createComponent(BusinessInfoComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
    spyOn(document.getElementById('info-banner'), 'scrollIntoView').and.callThrough(); 
    expect(document.getElementById('info-banner').scrollIntoView).toHaveBeenCalled();
    expect(document.getElementById('info-banner')).not.toBeDefined();
    fixture.detectChanges();
  });

测试:

ngOnInit() {
  document.getElementById('info-banner').scrollIntoView();

}
b91juud3

b91juud31#

document.getElementById('info-banner').scrollIntoView();应进入ngAfterViewInit()生命周期挂接。
基本上任何DOM引用都应该进入那个钩子。当ngOnInit()被执行时,DOM还不存在,因此错误。

qvk1mo1f

qvk1mo1f2#

试试看:
质量标准:

beforeEach(() => {
    fixture = TestBed.createComponent(BusinessInfoComponent);
    component = fixture.componentInstance;
    component.ngOnInit();
    spyOn(window.document.getElementById('info-banner'), 'scrollIntoView').and.callThrough(); 
    expect(window.document.getElementById('info-banner').scrollIntoView).toHaveBeenCalled();
    expect(window.document.getElementById('info-banner')).not.toBeDefined();
    fixture.detectChanges();
  });

角类

ngOnInit() {
  window.document.getElementById('info-banner').scrollIntoView();
}
dw1jzc5e

dw1jzc5e3#

试试这个。

// Get the reference of the variable 
@ViewChild("myDiv") divView: ElementRef;

   this.divView.nativeElement.scrollIntoView();
<div id="info-banner" #myDiv >Info </div>

查看此链接
https://www.techiediaries.com/angular-elementref/
要访问外部元素,请选中此
Access DOM element outside of Angular root component

ef1yzkbh

ef1yzkbh4#

我尝试了之前所有的答案,但没有一个对我有效。我想出了一个变通方案:
警告️️️:️不建议企业应用程序使用此代码。问题是myTarget从@ViewChild到定义的时间不会总是少于50 ms,因此滚动可能不会100%发生。不过,至于性能,我认为这不是一个大问题。
话虽如此,到目前为止,在我的应用程序中,这在100%的情况下对我有效,所以对于小爱好/学校/大学项目来说,这是一个很好的变通方案。在我的应用程序中,等待时间总是不到3毫秒。你可以在应用程序中的注解行中添加注解,看看你的组件需要多长时间。

async ngAfterViewInit() {
      let timesThat1MSWasWaited = 0;
      while (this.myTarget === undefined) {
        await new Promise(r => setTimeout(r, 1));
        if (timesThat1MSWasWaited > 50) {
          console.error('FatalException: Waited too long for highlighted song to appear in DOM.');
          return;
        }
        timesThat1MSWasWaited++;
      }
      // console.debug('Needed to wait at least ' + timesThat1MSWasWaited + 'ms for myTarget to appear.');

      this.myTarget.nativeElement.scrollIntoView({
        behavior: 'smooth',
        block: 'center',
      });
    }
  }

相关问题