Angular 2在模板渲染后执行脚本

Question

所以我有这个使用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删除模板中的脚本标记.我已经在ts文件中包含了JQuery,并且希望使用事件系统,但这似乎不起作用.有任何想法吗？这是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');
    }
}

Answer 1

ngAfterViewInit()的AppComponent是根组件后角呼叫的生命周期回调和它的孩子们都被渲染,它应该适合你的目的.

另请参见https://angular.io/guide/lifecycle-hooks

Answer 2

实际上ngAfterViewInit()只会在组件启动时启动一次。

如果您真的希望在屏幕上的 HTML 元素租用者之后触发事件，那么您可以使用 ngAfterViewChecked()