Angular 生命周期：如何在 Angular 初始化后执行 javascript 函数？答案

【问题标题】：Angular lifecycle: How do I execute a javascript function AFTER Angular has been initialized?Angular 生命周期：如何在 Angular 初始化后执行 javascript 函数？
【发布时间】：2020-02-25 16:10:17
【问题描述】：

我应该使用这个第三方框架，并且必须在 Angular 初始化后对其进行初始化。

我已经尝试将它添加到我的 index.html：

<body>
  ...
<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DKFDS Initialized', DKFDS);
        DKFDS.init();
    });
</script>
</body>

但这不起作用。

所以我尝试将其添加到 app.component.ts 中的 ngOnInit() 中：

ngOnInit() {
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DKFDS Initialized', DKFDS);
        DKFDS.init();
    });
}

还是没有运气:-(

我可以让它工作的唯一方法是使用 jQuery 调用 init() 函数：

ngOnInit() {
  $(() => {
    console.log('DKFDS Initialized', DKFDS);
      DKFDS.init();
    });
}

编辑：我也尝试过 ngAfterViewInit()，但结果同样令人失望......

所以我的问题是：如何在没有 jQuery 的纯 Angular 应用程序中完成这项工作？

我制作了一个堆栈闪电战来试图说明这个问题。单击“溢出菜单”会弹出一个菜单：https://stackblitz.com/edit/angular-ubsvkt

【问题讨论】：

你试过 ngAfterViewInit 吗？
在ngAfterViewInit 中调用你的函数，因为DOMContentLoaded 相当于ngAfterViewInit
更新的 OP：ngAfterViewInit() 也不起作用。

标签： javascript jquery angular

【解决方案1】：

查看updated stackblitz 示例，现在它可以工作了，

您可以找到已安装的 dkfds 依赖项，现在下拉菜单可以正常工作。问题是 Angular 不知道那个库是什么。 Here 是 dkfds npm 页面，您可以使用 npm install --save dkfds 安装到您的 Angular 项目中

【讨论】：

【解决方案2】：

在这种情况下，您可以在 ngAfterViewChecked

中初始化第三方库

ngAfterViewChecked() { 
      DKFDS.init();
}

有关角度生命周期挂钩，请参阅：https://angular.io/guide/lifecycle-hooks

【讨论】：

我试过了，但是 DKFDS.init() 一直被调用... :-)
@CJe , 你应该使用一个标志变量来检查它是否被初始化一次。

【解决方案3】：

您可以通过在单击按钮时切换showOverflowMenu 来显示/隐藏“溢出菜单内部”div。

试试这样：

Working Demo

<button (click)="showOverflowMenu = !showOverflowMenu"
  ...
</button>

    <div class="overflow-menu-inner" id="overflow1" *ngIf="showOverflowMenu">

        <ul class='overflow-list'>
            <li><button>Option 1</button></li>
            <li><button>Option 2</button></li>
            <li><a href='#'>Option 3 as link</a></li>
            <li><button>Option 4 is longer text</button></li>
        </ul>

    </div>

【讨论】：

这很好用 :-) 问题是溢出菜单不是 DKFDS 框架的唯一组件。所以我也必须为其他人做解决方法：-/
Angular 就是这样工作的，为什么要用 jquery 的方式呢？
哦，我不想使用 jQuery 来做这件事——绝对不是。那是我的全部问题 - 如何让它在没有 jQuery 的情况下工作:-)

【解决方案4】：

添加一个 setTimeOut 让它像魅力一样工作。或者使用 ngAfterViewInit() 角钩。

ngOnInit() {
  setTimeOut(() => {
   document.addEventListener('DOMContentLoaded', () => {
      console.log('DKFDS Initialized', DKFDS);
      DKFDS.init();
    });
  });   
}

【讨论】：