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

CONFIG_TEGRA_DEBUG_UARTA的{{1}}是一个生命周期回调，在根组件之后调用Angular，它的子项已经呈现，它应该适合您的目的。

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

Answer 2

实际上，ngAfterViewInit()仅在组件启动时启动一次。

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

Answer 3

我发现最好的地方是NgAfterViewChecked（）。我尝试执行加载页面时滚动到ng手风琴面板的代码。我尝试将代码放在NgAfterViewInit（）中，但在那儿不起作用（NPE）。问题在于该元素尚未渲染。将其放在NgAfterViewChecked（）中存在问题。呈现页面时，多次调用NgAfterViewChecked（）。在呈现元素之前进行了一些调用。这意味着可能需要检查是否为空以保护代码免受NPE的侵害。我正在使用Angular 8。

Answer 4

我使用过这种方法（报告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文件。

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

4 个答案: