2

由于我想使用您可以在许多网站上看到的滚动淡入功能，我想知道如何在我的应用程序中以“角度方式”实现此类功能。我已经有一个有效的组件实现，也许这可以帮助任何需要在滚动行为上使用这种淡入的人。

我对下面（缩短的）代码的问题是它不支持依赖注入，因为它总是创建一个新的 IntersectionObserver 实例。

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';

@Constructor({
  selector: 'app-cv',
  template: `<div class="entry-content"></div>`
})
export class CurriculumVitaeComponent implements OnInit, AfterViewInit, OnDestroy {
  public iIntersectionObserver :IntersectionObserver;

  constructor() {}

  ngOnInit() :void {
    this.iIntersectionObserver = new IntersectionObserver(entries => {
      console.log(entries); // your code here e.g. toggling classes with Renderer2
    }, { root: null, rootMargin: '0px', threshold: [0, .25, .5, .75, 1]});
  }

  ngAfterViewInit() :void {
    const tEntry :Element = document.querySelector('.entry-content');
    this.iIntersectionObserver.observe(tEntry);
  }

  ngOnDestroy() :void {
    this.iIntersectionObserver.disconnect(); // I'm lazy you could also save the ref and unobserve the Element
  }
}

如您所见，这非常有效，但是对于多个组件来说设置太多，并且根本不使用依赖注入。有没有办法配置它，可能是使用Service或Factory Provider？

这些是我偶然发现的一些链接，但我不知道如何实现这样的特定案例：

为 Angular 2 中的依赖注入提供模型类的新实例

创建具有依赖关系的类的新实例，不了解工厂提供者

4

0 回答 0