スムーススクロールPolyfillをAngular 2 CLIで使用

Question

Smooth Scroll Polyfillの使用方法を角2 CLIで教えてください。

私はpolyfills.tsするには、以下の追加しようとしたが、それは仕事上のエラーをスロー

require('smoothscroll-polyfill').polyfill(); 

を必要とし、それはビルド中に何らかのエラーをスローしませんでしたが、私はその後、

import 'smoothscroll-polyfill'; 

を追加しようとしたが、私はブラウザでプロジェクトを実行するとコンソール上で以下のエラーが表示されます：

Answer 1

はassetsフォルダにsmoothscroll.jsを含めると、このとindex.html

<script type="text/javascript" src="assets/smoothscroll.js"></script> 

作品にそれを置く：

ngOnInit(){ 

    window.scroll({ top: 200, left: 0, behavior: 'smooth' }); 
} 

Answer 2

ハイアー角度2/4ソリューション：

はこの2行を入れてあなたのsrc/polifills.tsに：

import smoothscroll from 'smoothscroll-polyfill/dist/smoothscroll.js'; 

あなたは、そうポリフィルと@types

1. yarn add smoothscroll-polyfillまたはnpm install smoothscroll-polyfill
2. yarn add @types/smoothscroll-polyfillまたはnpm install @types/smoothscroll-polyfill

をインストールし、あなたのコード内で使用すると、コンポーネントにポリフィルを初期化する必要があり、または必要

smoothscroll.polyfill();

Answer 3

このポリフィルを使用したいサービス：

import * as smoothscroll from "smoothscroll-polyfill"; 

@Component({ 
    selector: 'app-my-demo', 
    templateUrl: './app-my-demo.html', 
    styleUrls: ['./app-my-demo.css'] 
}) 
export MyClass my implements OnInit { 

    constructor(
) { 
    smoothscroll.polyfill(); 
    } 

あなたは、たとえば、コンポーネントで使用することができます：あなたは、角度CLIを使用している場合

clickAnyThing(event:any){ 
    window.scroll({ top: 0, left: 0, behavior: 'smooth' }); 
    } 

Answer 4

まずパッケージをインストールします。

npm install smoothscroll-polyfill

はその後に以下を追加します。 angle-cli.json apps.scripts配列の下：

その後、"../node_modules/smoothscroll-polyfill/src/smoothscroll.js"

など何かしてみてください：

window.scroll({ top: 400, left: 0, behavior: 'smooth' });

それが動作するはずですが。

Answer 5

これは私が私のpolyfills.tsファイルでそれを設定する方法である：それはでscripts` `でこれを置くために、より良い習慣と見なされ

your_element.scrollIntoView({ behavior: 'smooth' });