Angular 4中如何在*ngIf内容加载后初始化JavaScript？

针对你遇到的这个需求——让*ngIf控制的div加载完成后仅执行一次JS初始化，我给你两个实用的解决方案，都是Angular生态内的标准做法，能完美避开直接用原生DOM事件带来的兼容性问题：

方法一：利用ViewChild+视图钩子（适合单一组件内使用） #

因为你的div是通过*ngIf动态渲染的，只有当isLogin == 'true'时才会被插入DOM，所以我们可以通过视图引用结合钩子函数，加上一个标志位来确保初始化只执行一次：

1. 先给目标div添加模板引用变量：

<div #loginWrapper class="m-stack m-stack--ver m-stack--desktop m-header__wrapper" *ngIf="isLogin == 'true'"></div>

2. 在组件类中引入必要的依赖，实现视图钩子并添加初始化逻辑：

import { Component, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewChecked {
  // 获取模板引用的DOM元素
  @ViewChild('loginWrapper') loginWrapper: ElementRef;
  // 标志位：标记初始化是否已完成
  private hasInit = false;

  ngAfterViewChecked() {
    // 仅当元素存在且未初始化过时执行
    if (this.loginWrapper && !this.hasInit) {
      this.runInitScript();
      this.hasInit = true; // 标记为已完成，防止重复触发
    }
  }

  private runInitScript() {
    // 这里写你的初始化逻辑，比如第三方插件初始化、事件绑定等
    console.log('初始化脚本已执行（仅一次）');
    // 示例：如果要操作DOM元素，直接用this.loginWrapper.nativeElement
    // this.loginWrapper.nativeElement.style.backgroundColor = '#f0f0f0';
    // 或者初始化jQuery插件（如果项目中使用了jQuery）
    // $(this.loginWrapper.nativeElement).somePlugin();
  }
}

原理说明：ngAfterViewChecked会在每次视图更新后触发，但我们通过hasInit标志位限制了初始化逻辑只执行一次；同时只有当loginWrapper存在（也就是div被渲染到DOM中）时才会执行代码。

方法二：自定义指令（适合多组件复用场景） #

如果这个初始化逻辑需要在多个地方使用，自定义指令会更优雅，也符合Angular的组件化思想：

1. 创建一个名为AfterRenderDirective的指令：

import { Directive, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[afterRender]' // 指令的选择器，用方括号表示属性指令
})
export class AfterRenderDirective implements OnInit {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    // 指令所在元素被插入DOM后，执行初始化逻辑
    this.executeInit();
  }

  private executeInit() {
    // 这里直接操作当前指令绑定的元素
    console.log('初始化脚本已执行（仅一次）', this.el.nativeElement);
    // 写入你的初始化代码，比如：
    // 初始化某个UI组件、绑定自定义事件等
  }
}

2. 在你的模块中声明这个指令：

import { NgModule } from '@angular/core';
import { AfterRenderDirective } from './after-render.directive';

@NgModule({
  declarations: [
    // ...其他组件、管道
    AfterRenderDirective
  ]
})
export class YourModule {}

3. 最后在目标div上使用这个指令即可：

<div afterRender class="m-stack m-stack--ver m-stack--desktop m-header__wrapper" *ngIf="isLogin == 'true'"></div>

原理说明：因为*ngIf控制的元素只有在条件满足时才会被创建，指令的ngOnInit钩子只会在元素被插入DOM的那一刻执行一次，完全符合你的需求。

额外注意事项 #

• 尽量避免在Angular中直接操作DOM，如果你的初始化逻辑是第三方库的功能，优先找该库的Angular封装版本；
• 如果div内部还有异步加载的内容（比如通过*ngFor渲染的列表或者HTTP请求返回的内容），你可能需要额外监听内容的加载状态，但大多数场景下上述两种方法已经足够解决问题。

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