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

原文由 Carl Boisvert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

ngAfterViewInit() of AppComponent 是在根组件及其子组件被渲染后的生命周期回调 Angular 调用，它应该适合您的目的。

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

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我发现最好的地方是 NgAfterViewChecked()。我尝试执行在页面加载时滚动到 ng-accordion 面板的代码。我尝试将代码放入 NgAfterViewInit() 但它在那里不起作用（NPE）。问题是该元素尚未渲染。将其放入 NgAfterViewChecked() 中会出现问题。 NgAfterViewChecked() 在页面渲染时被多次调用。在渲染元素之前会进行一些调用。这意味着可能需要检查 null 以保护代码免受 NPE 的影响。我正在使用 Angular 8。

原文由 Mark Glass 发布，翻译遵循 CC BY-SA 4.0 许可协议