延迟加载和ScrollIntoView()Angular2(版本7) [英] Lazy Loading and ScrollIntoView() Angular2(version 7)

问题描述

我试图在第一次加载具有延迟加载的页面时显示一个组件，该加载仅在视图中加载内容的情况下进行.例如:-页面上有10个组件，我想在第一次加载时以懒惰加载方式显示/滚动到组件编号7(以提高性能).

I'm trying to show a component when first load the page with lazy loading that only load the content if it's in the view. For example: - There are 10 components on the page and I want to show/scroll to the component number 7 on first load with lazy loading(for performance).

如何正确执行此操作?这里的挑战是因为这些组件是延迟加载的，并且具有巨大的图像，这些图像弄乱了scrollIntoView()并滚动太多，从而无法通过该组件的顶部.

How do I do this correctly? Challenge here is because these components are lazy loading and have huge images that messed up the scrollIntoView() and scrolled too much to the top passed the component.

• 我已经尝试过这些方法，但是没有运气:(
• 提供对组件7的引用:

• I've tried these approaches but no luck :(
• Put a reference to the component 7:

1. 通过scrollIntoView()滚动到该组件.将window.scrollBy(0，-100)用于导航栏.
2. 获取组件offsetTop并使用window.scrollTo(0，targetComponent.offsetTop-100);
3. 以上两种方法都一样，但是setTimeout为2s-5s也不起作用.
4. 使用scrollIntoView()滚动到组件，使用setTimeout等待几秒钟，然后再次使用window.scrollBy(0，-100)来使用scrollIntoView().
5. 给图像容器一个固定的高度(即:500px)，以便延迟加载的图像会填满容器，但是如果在其他页面上使用该组件会得到较大尺寸的图像(即:1200px)，该怎么办?使用者介面
6. window.scrollY，window.pageYOffset，getBoundingClientRect().top以及我获取所需高度的这些值与从console.log所获得的代码与浏览器值相比有所不同，因此我的计算不正确.
7. scrollIntoView({block:'start'})和window.scrollBy(0，-100)也不起作用.即使我使用window.scrollBy(0，-100)，它也滚动到顶部并通过导航栏.还尝试了setTimeout.

我尝试过类似的操作，但是组件仍然滚动太多到顶部.

Something like this that I tried but the component still scroll too much to the top.

<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
<div>Div 6</div>
<div #target>Target Div 7</div>
<div>Div 8</div>
<div>Div 9</div>
<div>Div 10</div>

export class BBQComponent implements AfterViewInit {
  @ViewChild("target") targetElement: ElementRef;

  ngAfterViewInit() {
    setTimeout(_ => {
     this.targetElement.nativeElement.scrollIntoView({block: "start"});
     window.scrollBy(0, -100);
    }, 2000); 
  }
}

我希望该页面在首次访问时显示在导航栏下方(高度约100像素).我一直在寻找解决方案，并尝试了不同的方法，但仍然停留在这一点.

I expect the page to show the component on first visit just below the navigation bar (about 100px in height). I have searched for the solutions and tried out different things but still stuck at this.

是否缺少使此功能scrollIntoView用于延迟加载内容的功能?谢谢！

Is there something that I missed to get this feature scrollIntoView to work with lazy loading content? Thanks!!

推荐答案

• 目前最佳解决方案

export class BBQComponent implements AfterContentChecked {
  @ViewChild("target") targetElement: ElementRef;
  scrolled = false; // To avoid multiple scrolls because ngAfterContentChecked

  ngAfterContentChecked() { // Changed from ngAfterViewInit()
    if(!scrolled) {
      const target = this.targetElement.nativeElement;
      target.scrollIntoView({block: "start"}); // Scroll to the component

      // After scrolled, wait for the browser to figure out where the 
      // component is after lazy loading is done. Scroll again.
      setTimeout(_ => {
       target.scrollIntoView({block: "start"});
       window.scrollBy(0, -100); // Nav's height
       this.scrolled = true;
      }, 1000); // Adjust wait time as needed
    }
  }
}

这篇关于延迟加载和ScrollIntoView()Angular2(版本7)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！