javascript - Angular 2使用AfterViewInit从文件执行JS

Question

对 Angular 2 还很陌生，在四处寻找几个小时后，我希望得到一些帮助。

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

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

该文件实际上包含更多代码。可以想象，我想启用所有组件的工具提示。我不能简单地将此文件包含在 index.html 中，因为加载文件时(还)不存在子组件。

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

所以在这里我提出了 2 个相关的问题:

1# 有没有办法在加载子组件时执行JS代码？例如，像这样的东西:

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

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

2# 有没有办法将 JS 代码直接复制/粘贴到 ngAfterViewInit() 中？我不想将 300 行 JS 代码复制/粘贴到 15 个不同的组件中(出于显而易见的原因)。

非常感谢您的帮助!

Answer 1

有关如何获取 Angular 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');
  }

}