如何在Angular 5组件中调用jQuery插件函数ace.demo.init()

没问题，我来帮你解决在Angular 5组件里调用ace.demo.init()的问题，步骤其实很清晰，咱们一步步来：

第一步：确保Ace插件脚本已正确引入 #

ace是全局对象，你得先让它能在浏览器环境中被访问到，两种方式二选一就行：

• 在项目的index.html里直接添加对应的<script>标签，引入Ace插件的JS文件；
• 在angular.json（Angular 5可能是.angular-cli.json）的scripts数组里配置插件文件路径，Angular会自动帮你加载它。

第二步：解决TypeScript类型报错 #

TypeScript会因为找不到ace这个全局变量而抛出错误，你只需要在组件文件的import语句之后，添加一行声明：

declare let ace: any;

这行代码会告诉TypeScript：“这个全局的ace变量是存在的，不用报错啦”。

第三步：在合适的生命周期钩子中调用初始化函数 #

你已经选对了ngAfterViewInit这个钩子——它会在组件视图及其子视图都渲染完成后触发，这时候DOM元素都已就绪，插件才能正确绑定到目标元素上。只需要在你的doJqueryLoad方法里直接调用初始化函数即可。

修改后的完整组件代码 #

import { Component, OnInit, AfterViewInit } from '@angular/core';
import {NavComponent} from "../../shared/module/navbar/nav/nav.component"
import {FooterComponent} from "../../shared/module/footer/footer/footer.component"
import {SidebarComponent} from "../../shared/module/sidebar/sidebar/sidebar.component"
import * as $ from 'jquery';

// 声明全局ace变量，解决TypeScript类型校验问题
declare let ace: any;

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit, AfterViewInit {
  constructor() { }

  ngAfterViewInit() {
    this.doJqueryLoad();
  }

  ngOnInit() {
  }

  doJqueryLoad() {
    console.log("here i want to call");
    // 调用Ace插件的初始化函数
    ace.demo.init();
  }
}

额外注意 #

如果你的Ace插件依赖jQuery，确保全局环境中也能访问到$——你已经导入了jquery，这一步基本没问题，但如果插件还是报错，可以检查下angular.json的scripts里是否也添加了jQuery的路径。

内容的提问来源于stack exchange，提问作者Asad