jquery - Angular 2 تنفيذ السكريبت بعد عرض القالب

لذا لدي هذا المكون المنزلق الذي يستخدم جافاسكريبت من MaterializeCSS. لذلك بعد عرضه، أحتاج إلى التنفيذ

$(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');
    }
}

الإجابة رقم 1

ngAfterViewInit() في AppComponent هو رد نداء دورة الحياة الذي يستدعيه Angular بعد أن يتم عرض المكون الجذر وأطفاله، وينبغي أن يكون مناسبًا لغرضك.

انظر أيضًا https://angular.io/guide/lifecycle-hooks

الإجابة رقم 2

في الواقع، ngAfterViewInit() سيتم تفعيله مرة واحدة فقط عند بدء تشغيل المكوّن.

إذا كنت تريد حقًا حدثًا يتم تفعيله بعد ظهور عنصر HTML على الشاشة، فيمكنك استخدام ngAfterViewChecked()