angular - 如何在 Angular 中使用机车滚动

Question

有没有办法以角度使用机车滚动。我在谷歌上没有找到任何关于此的内容。有人曾经在角度使用过机车卷轴吗？

我尝试将它导入到我的 homepage.component.ts 中：

import {Component, HostListener, OnInit} from '@angular/core';
import {AppComponent} from '../app.component';
import LocomotiveScroll from 'locomotive-scroll';


@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
  scroll;

  constructor() {

  }

  @HostListener('window:load')
  initLocomotiveScroll() {
    this.scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
    });
  }

}

homepage.componenet.html ：

<div data-scroll-container style="height: 100%; overflow: scroll">
  <div data-scroll-section>
    <h1 data-scroll>Hey</h1>
    <p data-scroll></p>
  </div>
  <div data-scroll-section>
    <h2 data-scroll data-scroll-speed="1">What's up?</h2>
    <p data-scroll data-scroll-speed="2"></p>
  </div>
</div>

提前致谢。

杰里米。

Answer 1

Locomotive Scroll 必须知道您的内容高度才能正常工作。要解决此问题，请在渲染或更改内容时调用 Locomotive Scroll 的 update 方法。这可以通过使用 Locomotive Scroll 的 .update() 函数来完成。

如本教程所述，您可以使用调整大小观察器来自动调用更新函数：https ://flo-lech.medium.com/using-locomotive-scroll-with-angular-a5e9049233dd

Answer 2

你的问题是严格的属性。

修复 tsconfig.json

将tsconfing.json文件中的 strict 属性设置为 false

 "strict": false

这对我有用！