我尝试在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();
}
4条答案
按热度按时间b91juud31#
document.getElementById('info-banner').scrollIntoView();
应进入ngAfterViewInit()
生命周期挂接。基本上任何DOM引用都应该进入那个钩子。当
ngOnInit()
被执行时,DOM还不存在,因此错误。qvk1mo1f2#
试试看:
质量标准:
角类
dw1jzc5e3#
试试这个。
查看此链接
https://www.techiediaries.com/angular-elementref/
要访问外部元素,请选中此
Access DOM element outside of Angular root component
ef1yzkbh4#
我尝试了之前所有的答案,但没有一个对我有效。我想出了一个变通方案:
警告️️️:️不建议企业应用程序使用此代码。问题是myTarget从@ViewChild到定义的时间不会总是少于50 ms,因此滚动可能不会100%发生。不过,至于性能,我认为这不是一个大问题。
话虽如此,到目前为止,在我的应用程序中,这在100%的情况下对我有效,所以对于小爱好/学校/大学项目来说,这是一个很好的变通方案。在我的应用程序中,等待时间总是不到3毫秒。你可以在应用程序中的注解行中添加注解,看看你的组件需要多长时间。