Question

Angular 2的新手，在环顾了几个小时后，我想帮忙。

我有一个带有一些通用函数的JS文件。例如：

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

此文件实际上包含更多代码。您可以想象，我想启用所有组件的工具提示。我无法在index.html中简单地包含此文件，因为在加载文件时子组件尚未存在（

）。

经过一番挖掘，afterViewInit()出现了。 This post建议将JS代码复制/粘贴到ngAfterViewInit()。这是丑陋的方式（在我看来）......

所以我在这里提出了两个相关的问题：

1＃有没有办法在加载子组件时执行JS代码？例如，像：

// In app.component.ts
ngAfterChildComponentLoaded(){
   // JS code here
}

这个解决方案非常有趣，因为我并没有被迫在所有组件中使用相同的内容来实现ngAfterViewInit()。但这可能吗？

2＃有没有办法导入JS代码，将其复制/粘贴到ngAfterViewInit()？我不想将300行JS代码复制/粘贴到15个不同的组件中（原因很明显）。

非常感谢你的帮助！

Answer 1

有关如何以角度2/4获取特定组件的外部js文件，请参阅以下内容：

import { Component, OnInit , AfterViewInit} from '@angular/core';
import { Router } from '@angular/router';
declare var $: any;
@Component({
  moduleId: module.id,  
  selector: 'dashboard',
  templateUrl: './dashboard.html',
  styleUrls: ['./dashboard.css']
})
export class DashboardComponent implements OnInit,AfterViewInit {

 constructor() {}

  ngOnInit() {
  }
  ngAfterViewInit(){
    $.getScript('assets/assets/build/js/custom.min.js');
  }

}

Answer 2

有一个不那么丑陋的解决方案，如果有人有更好的解决方案，我很乐意接受他的回答！

  ngAfterViewInit(){
      $.getScript('assets/js/myscript.js', function(){});
  }

Angular 2使用AfterViewInit

2 个答案: