javascript - Angular 2 和 Scrollmagic

Question

我正在尝试将 scrollmagic 实现到我的 Angular 2 应用程序中，但到目前为止我一直没有成功。我看过很多教程，但他们无法帮助我。我正在寻找可以清楚地向我解释如何让 Angular 2 与 scrollmagic 一起工作的人。我试过这个:

我在我的组件中添加了这个:

import { TweenLite, TimelineMax, TweenMax } from "gsap";
import { Component, NgZone, AfterViewInit} from '@angular/core';
declare let ScrollMagic: any;

@Component({
 selector: "info-strip",
 templateUrl: "./info-strip.component.html",
 styleUrls: ["./info-strip.component.scss"],
 animations: []
})

export class InfoStripComponent {

ctrl = new ScrollMagic.Controller();
constructor(private zone: NgZone) {}
ngAfterViewInit() {
    new ScrollMagic.Scene({
        offset: 200,
        duration: 50
    })
        .setPin("#info_strip")
        .addTo(this.ctrl);
}}

`

如果我将我的 Controller 和场景写入日志，我可以看到它们是有效的 ScrollMagic 项目，但是我的代码似乎没有做任何事情，也没有显示任何错误。我只想创建一个粘性标题。请任何人帮助让 scrollmagic 与 angular 2 一起工作

Answer 1

我用Angular CLI + ScrollMagic搭建了一个测试系统，发现了一个问题。

ng 版本信息

Angular CLI: 1.5.2
Node: 6.10.3
OS: win32 x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1

构建步骤

• 新的 scrollmagictest
• yarn 安装
• yarn 添加 scrollmagic
• yarn 添加 gsap
• yarn add --dev @types/gsap

测试组件

注意，我的 ScrollMagic 代码可能不是最优的。

app.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { TweenMax, TimelineMax } from 'gsap';
import * as ScrollMagic from 'ScrollMagic';
import 'ScrollMagic/scrollmagic/minified/plugins/debug.addIndicators.min.js';
// import 'ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  ctrl = new ScrollMagic.Controller();

  ngAfterViewInit() {
    new ScrollMagic.Scene({
      triggerElement: '.menu-trigger',
      duration: window.screen.height,
      triggerHook: 0
    })
    .setPin('#menu', { pushFollowers: false })
    .addTo(this.ctrl);
  }

}

app.component.html

<nav class="nav">
  <h1 class="header">Header</h1>
  <div class="menu-trigger">
    <ul id="menu">
      <li><a href="">ScrollMagic</a></li>
      <li><a href="">Will</a></li>
      <li><a href="">Pin</a></li>
      <li><a href="">This</a></li>
      <li><a href="">Menu</a></li>
      <li><a href="">Until</a></li>
      <li><a href="">Second</a></li>
      <li><a href="">Slide</a></li>
    </ul>
  </div>
</nav>

<section class="slide slide01">
  <h1>Content</h1>
</section>

<section class="slide slide02">
  <h1>More Content</h1>
</section>

app.component.css

body { font-family: Helvetica, Arial, sans-serif; color: rgb(70, 67, 67); }

html, body { margin: 0; height: 100%; }

.nav {
  color: rgb(255, 255, 255);
}

.nav .header {
  font-size: xx-large;
  padding: 20px 10px 20px 10px;
  color: rgb(70, 67, 67);
  background-color: rgb(212, 215, 248);
}

#menu {
  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-left: 0;
  list-style: none;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  margin-bottom: 0;
  margin-top: 0;
  border-bottom: 1px solid rgb(203, 189, 189);
}

#menu li {
  padding: 10px;
}

#menu li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-weight: bold;
}

h1, p {
  margin: 0; padding: 0;
}

.slide {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #efefef;
  height: 1200px;
}

.slide01 { background-color: rgb(168, 190, 246); }
.slide02 { background-color: rgb(4, 63, 164); }

我发现的问题

注意注释掉的行

// import 'ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js';

如果我们尝试包含这个插件，webpack 在将它连接到 gsap 时会出现问题。

ng构建之后，

ERROR in ./node_modules/ScrollMagic/scrollmagic/minified/plugins/animation.gsap.min.js Module not found: Error: Can't resolve 'TimelineMax' in ...

解决问题

此帖tsconfig paths not respected 2017 年 11 月 4 日给出了一个解决方案，但它涉及修补 node_modules/@ngtools/webpack/src/paths-plugin.js。

来自帖子，

FYI, for anyone else needing the pre-1.2.6 behavior, the solution I landed on is using the latest Angular/CLI/etc. and just overwriting node_modules/@ngtools/webpack/src/paths-plugin.js with https://github.com/buu700/ngtools-webpack-tmp/blob/master/src/paths-plugin.js. It's not very elegant, and could be broken by a future release, but gets the job done for now without blocking updating to Angular 5.

---

替代分辨率

如果您不喜欢破解 npm 安装的@ngtools/webpack/src/paths-plugin.js，这里有一个替代方案。

部分构建错误信息为

path\to\myProject\src\TweenMax.js doesn't exist

所以我们可以(粗略地)通过将 gasp 源文件复制到 ./src 文件夹来修复它。

参见 How to hook 3rd party scripts before serving / building an app with angular-cli ，Cory Rylan 展示了如何使用 package.json 中的 npm 脚本来 Hook 构建过程。

• 将两个新的 npm 脚本添加到 package.json，将 build 脚本保持原样，以便它可以正常运行。
• 每当执行全局 npm install 或其他可能更改 gasp 文件的命令时，运行命令 npm run startbuild。
• 请注意，我安装了 copyfiles全局范围内，为了方便。

package.json

{
  "name": "myProject",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    ...
    "startbuild": "npm run prebuild && ng build",
    "prebuild": "copyfiles -f node_modules/gsap/src/uncompressed/*.js src",
    "build": "ng build",
    ...
  },