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

所以我有一个使用MaterializeCSJavaScript的滑块组件。所以在渲染之后，我需要执行

$(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-remove-script标记。我已经将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');
    }
}

//
从'angular2/core'导入{组件，输入}；
从“angular2/router”导入{RouterLink}；
从“./server”导入{ServerService}；
@组成部分({
选择器：“滑块”，
templateUrl:“/app/template/slider.html”，
指令：[]，
})
导出类滑块组件{
@输入（）图像；
专用服务器：服务器服务；
公共构造函数（服务器：ServerService）{
this.server=server；
}
恩戈尼尼特（）{
console.log（“抛出事件”）；
$（'body'）。触发器（'Slider-Loaded'）；
}
}
AppComponent
的
ngAfterViewInit（）
是在呈现根组件及其子组件之后的生命周期回调，它应该适合您的用途

另请参见
我使用过这种方法（已报告）

它对我很有效，因为我想在呈现组件后执行javascript文件。
实际上
ngAfterViewInit（）
在组件启动时只启动一次

如果您确实希望在屏幕上的HTML元素renter之后触发事件，则可以使用
ngAfterViewChecked（）
我发现最好的位置是ngAfterViewChecked（）。我试图执行的代码会滚动到一个ng手风琴面板时，页面加载。我尝试将代码放在NgAfterViewInit（）中，但在那里不起作用（NPE）。问题是该元素尚未渲染。将其放入NgAfterViewChecked（）时出现问题。呈现页面时，会多次调用NgAfterViewChecked（）。某些调用是在呈现元素之前进行的。这意味着可能需要检查null来保护代码不受NPE的影响。我用的是Angular 8。
嘿，你会碰巧知道为什么以前连鱼都没钓到吗。即使元素没有呈现，我也希望jquery捕获事件，但无法对其执行操作。slider，因为它没有呈现。您好，我知道这是一个老问题，但我在尝试从
ngAfterViewInit
钩子运行jquery代码时遇到问题。我要运行的代码是：
$（“#项目面板选项卡”）.foundation（）
$（“#项目面板选项卡”）.foundation（'selectTab'，'objectPanel'）
问题在于tab元素（ID
#item panel tabs
）在
*ngIf
指令下，仅当组件接收到对象时才会显示，因此当我调用jQuery函数时，它不在DOM中，并且不起作用。有没有解决这个问题的建议？可能会有帮助，或者您可以使用
[hidden]=“！condition”
而不是
*ngIf=“condition”
来立即添加元素，但不显示。此答案不正确。ngAfterViewInit（）在显示模板后未运行。我尝试了很多次，页面才开始显示元素，这个方法就运行了。所以它不会在组件完全安装后运行displayed@GünterZöchbauer实际上他是对的，AppComponent的ngAfterViewInit是在AppComponent初始化之后运行的，但是嵌套组件可能仍然在等待init/ajax调用响应。令人惊讶的是，由于实现的顺序，这种方法可能会起作用。HTML出现在数据建立之前。同样的经历，ngAfterViewInit在呈现元素之前被调用，ngAfterViewChecked被反复调用。我不认为通过空检查来处理这个问题是一个合适的解决方案。
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);
  }
}