为什么使用 Angular 时 Locomotive Scroll 不工作<router-outlet>？

问：

我在我的 Angular 项目中使用 Locomotive Scroll 版本 4.1.4。

问题

我导入了 Locomotive Scroll。问题是，在使用该应用程序时会“冻结”（即根本无法滚动）。比方说，路由器显示主页（即），我按预期使用机车滚动元素属性（例如，），但无法滚动。app.component.ts<router-outlet>home.component.htmldata-scroll data-scroll-speed="2"

不工作：

app.component.html

<div data-scroll-container>
    <header data-scroll-section>
        <app-header></app-header>
    </header>

    <main data-scroll-section>
        <router-outlet></router-outlet>
    </main>

    <footer data-scroll-section>
        <app-footer></app-footer>
    </footer>
</div>

而如果我将内容从直接复制粘贴到所有内容中，就像一个魅力！home.component.htmlapp.component.html

加工：

app.component.html

<div data-scroll-container>
    <header data-scroll-section>
        <app-header></app-header>
    </header>

    <main>
        <!-- Content from home.component.html -->
        <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>
    </main>

    <footer data-scroll-section>
        <app-footer></app-footer>
    </footer>
</div>

我试过什么

1. 如果我也导入了 Locomotive Scroll，那么我在我的项目中导入了两次 Locomotive Scroll（即 in 和 ）。因此，当显示主页时，机车卷轴开始工作，但整个应用程序已损坏（即，由于两个机车卷轴导入相互干扰，正在发生一些奇怪的故障）。home.component.tsapp.component.tshome.component.ts
2. 如果我只导入机车滚动并从中移除它，并且没有正确显示（即，它们显示在后面），但是当显示主页时，机车滚动开始工作。home.component.tsapp.component.ts<header><footer><main>

问题

如果我在特定组件中使用 Locomotive Scroll 元素属性（例如，），我如何在我的应用程序中（即 ）导入一次 Locomotive Scroll 并使用 Locomotive Scroll 来工作？app.component.ts<router-outlet>data-scroll data-scroll-speed="2"home.component.html