如何使用 angular 调用组件 class 上的 ngAfterViewInit() 中的 $( document ).ready() jQuery 函数 2

Question

密码是

constructor(private el: ElementRef) { }

ngAfterViewInit() {

    this.loadScript('app/homepage/template-scripts.js');       


}

Answer 1

Angular 让您避免这种 jquery 对生命周期事件的依赖：

（按生命周期排序）

-ngOnChanges -ngOnInit -ngDoCheck -ngAfterContentInit -ngAfterContentChecked -ngAfterViewInit -ngAfterViewChecked -ngOnDestroy

如果你想使用 jquery 函数 .ready，你应该在你的 angular 项目中导入 jquery 作为依赖项，然后在你的 .ts 文件并在 ngAfterViewInit:

中调用它

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

-----

import $ from 'jquery';
//

ngAfterViewInit() {
// other stuffs

if ($.ready()) {
    console.log('ready');
  }
}

我上面的代码有效。

但我想向您解释一下这是不好的做法，因为您要将逻辑放入现有的 angular 生命周期逻辑中。

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

希望对您有所帮助

如何使用 angular 调用组件 class 上的 ngAfterViewInit() 中的 $( document ).ready() jQuery 函数 2

How to call $( document ).ready() jQuery function with in ngAfterViewInit() on Component class using angular 2

typescript

angular2-directives

angular-components

angular