web-dev-qa-db-ja.com

Angular 2テンプレートのレンダリング後にスクリプトを実行

したがって、Materializecss JavaScriptを使用するこのスライダーコンポーネントがあります。レンダリングされた後、実行する必要があります

$(document).ready(function(){
    $('body').on('Slider-Loaded',function(){
        console.log('EVENT SLIDER LOADED');
        $('.slider').slider({full_width: true});
        $('.slider').hover(function () {
            $(this).slider('pause');
        }, function () {
            $(this).slider('start')
        });
    });
});

しかし、TypeScript/angularはテンプレート内のスクリプトタグを削除するため、この行をどこに配置するかはよくわかりません。 JQueryをtsファイルに含めて、イベントシステムを使用したいと思っていましたが、うまくいかないようです。何か案は？ tsファイルのコードは次のとおりです。

/// <reference path="../../typings/main.d.ts" />
import {Component, Input} from 'angular2/core';
import { RouterLink } from 'angular2/router';
import {ServerService} from './server';


@Component({
    selector: 'slider',
    templateUrl:'/app/template/slider.html',
    directives: [  ],
})

export class SliderComponent {
    @Input() images;
    private server: ServerService;
    public constructor(server: ServerService){
        this.server = server;
    }

    ngOnInit() {
        console.log("THROWING EVENT");
        $('body').trigger('Slider-Loaded');
    }
}
jqueryangulartypescript
48
Carl Boisvert

AppComponentのngAfterViewInit()は、ライフサイクルコールバックですAngularは、ルートコンポーネントとその子がレンダリングされた後に呼び出され、目的に合っている必要があります。

https://angular.io/guide/lifecycle-hooks も参照してください

72
Günter Zöchbauer

私はこの方法を使用しました（ here ）

export class AppComponent {

  constructor() {
    if(document.getElementById("testScript"))
      document.getElementById("testScript").remove();
    var testScript = document.createElement("script");
    testScript.setAttribute("id", "testScript");
    testScript.setAttribute("src", "assets/js/test.js");
    document.body.appendChild(testScript);
  }
}

コンポーネントのレンダリング後にjavascriptファイルを実行したかったので、私にとってはうまくいきました。

0
elfu