Question

简单的问题，我希望。

我希望在触发Angular2等效的$ document.ready（）时运行脚本。实现这一目标的最佳方法是什么？

我已尝试将脚本放在index.html的末尾，但正如我发现的那样，这不起作用！我认为它必须进行某种组件声明？

是否可以从.js文件中加载脚本？

编辑 - 代码：

我已将以下js和css插件注入我的应用程序（来自Foundry html theme）。

    <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    ...


    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/flexslider.min.js"></script>
    ...
    <script src="js/scripts.js"></script> //This initiates all the plugins

如上所述，scripts.js'实例化'整个事物，因此需要在Angular准备好之后运行。 script.js

搞定了：

import {Component, AfterViewInit} from 'angular2/core';

@Component({
  selector: 'home',
  templateUrl: './components/home/home.html'
})
export class HomeCmp implements AfterViewInit {


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

Answer 1

复制克里斯的答案：

搞定了：

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
    }

Answer 2

您可以在Angular根组件的ngOnInit()中自行触发事件，然后在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'));
  }
}

Answer 3

我使用了这个解决方案，因此除了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');
  }

Answer 4

为了在Angular中使用jQuery，只需将$声明如下： 声明var $：any;

Answer 5

接受的答案是不正确的，考虑到这个问题也没有道理

ngAfterViewInit将在DOM准备就绪时触发

只有在页面组件开始创建时，ngOnInit才会触发

Answer 6

在DOMContentLoaded之后在您的 main.ts 文件引导程序中，以便在完全加载DOM时加载角度文件。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}



document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
});

Angular2相当于$ document.ready（）

6 个答案: