如何在Angular中使用机车卷轴

Question

有没有办法在angular中使用火车头卷轴。我在谷歌上找不到这方面的任何东西。有人在angular中使用过火车头卷轴吗？

我尝试将其导入到我的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

火车头卷轴必须知道您的内容高度，以便正确工作。要解决此问题，请在呈现或更改内容时调用火车头滚动的update方法。这可以通过使用火车头卷轴的.update()函数来完成。

Answer 2

您的问题是strict属性。

修复tsconfig.json

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

 "strict": false

这对我很有效！