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

yws3nbqq 于 2023-01-30 发布在 jQuery

关注(0)|答案(5)|浏览(238)

我有一个使用materializecss javascript的slider组件，在渲染之后，我需要执行

$(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删除了模板中的script标签。我已经在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');
    }
}

jquery

来源：https://stackoverflow.com/questions/36184458/angular-2-execute-script-after-template-render

5条答案

按热度按时间

3b6akqbq1#

AppComponent的ngAfterViewInit()是一个生命周期回调Angular调用，在根组件及其子组件渲染之后，它应该适合您的目的。
另请参见https://angular.io/guide/lifecycle-hooks

赞(0）回复(0）举报 2023-01-30

iszxjhcz2#

实际上，ngAfterViewInit()只在组件启动时启动一次。
如果您确实希望在屏幕上的HTML元素租赁器之后触发事件，则可以使用ngAfterViewChecked()

赞(0）回复(0）举报 2023-01-30

uqdfh47h3#

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

赞(0）回复(0）举报 2023-01-30

o2rvlv0m4#

如果函数要渲染多次，则ngAfterContentChecked将更可取。

- 应用程序组件. ts**

export class AppComponent implements OnInit, OnDestroy {
  
  searchRegister: any = [];

  constructor() {
  }
  
  setHTMLElements() {
    this.searchRegister = ['cards-descriptor__subtitle','insights-card__title','article-headline__title','wysiwyg__content','footer-logo__heading','hero-breadcrumbs__blurb','multi-column-text__body','small-two-column-image-text__blurb','two-column-image-text__blurb','image-blurbs-expandable__desc',];
      for (var val of this.searchRegister) {
        var classLength = this.dom.body.getElementsByClassName(val).length;
        for (var i = 0; i <= classLength; i++) {
          if (
            this.dom.body.getElementsByClassName(val)[i]?.innerHTML != undefined
          ) {
            this.dom.body.getElementsByClassName(val)[
              i
            ].innerHTML = this.dom.body
              .getElementsByClassName(val)
              [i]?.innerHTML?.replace(/[®]/gi, '<sup>®</sup>');
          }
        }
      }
    }
}

- 其他组件ts**

import { AppComponent } from '../../app.component';
export class IndustryComponent implements OnInit {

  constructor(private appComponent: AppComponent) { }

  ngAfterContentChecked(): void {
    this.appComponent.setHTMLElements();
  }
}

赞(0）回复(0）举报 2023-01-30

uz75evzq5#

我用过这种方法（在这里报告）

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文件。

赞(0）回复(0）举报 2023-01-30

我来回答

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

5条答案

相关问题

热门标签

最新问答