当前位置:  开发笔记 > 编程语言 > 正文

Angular2相当于$ document.ready()

如何解决《Angular2相当于$document.ready()》经验,为你挑选了3个好方法。



1> Sameer..:

复制克里斯的答案:

搞定了:

import {AfterViewInit} from 'angular2/core';    

export class HomeCmp implements AfterViewInit {    

    ngAfterViewInit() {
       //Copy in all the js code from the script.js. Typescript will complain but it works just fine
    }


不确定为什么倒下.这对我有用,但也引入了我试图运行的遗留JS代码和视图编译器之间的竞争.我最终使用了'AfterViewChecked`,但同样的,这是一个指向我正确方向的upvote.

2> Günter Zöchb..:

您可以自己在ngOnInit()Angular根组件中触发事件,然后在Angular之外侦听此事件.

这是Dart代码(我不知道TypeScript)但不应该难以翻译

@Component(selector: 'app-element')
@View(
    templateUrl: 'app_element.html',
)
class AppElement implements OnInit {
  ElementRef elementRef;
  AppElement(this.elementRef);

  void ngOnInit() {
    DOM.dispatchEvent(elementRef.nativeElement, new CustomEvent('angular-ready'));
  }
}


然后你只需运行`ngAfterViewInit(){...}`中的代码.无需开火.

3> wchoward..:

我使用了这个解决方案,所以除了jQuery $ .getScript函数之外,我不必在组件中包含我的自定义js代码.

注意:依赖于jQuery.所以你需要jQuery和jQuery类型.

我发现这是一个很好的方法来绕过没有类型的自定义或供应商js文件,这样当你去开始你的应用程序时,TypeScript不会尖叫你.

import { Component,AfterViewInit} from '@angular/core'

@Component({
  selector: 'ssContent',
  templateUrl: 'app/content/content.html',
})
export class ContentComponent implements AfterViewInit  {

  ngAfterViewInit(){
    $.getScript('../js/myjsfile.js');
  }
}

实际更新在我的场景中,OnInit生命周期事件工作得更好,因为它阻止了脚本在加载视图后加载,这是ngAfterViewInit的情况,并且导致视图在脚本加载之前显示不正确的元素位置.

ngOnInit() {
    $.getScript('../js/mimity.js');
  }


@ eat-sleep-code我觉得你需要jQuery打字,怎么样给'npm install @ types/jquery -D`一个镜头?:d
推荐阅读
罗文彬2502852027
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有