*ngIf渲染后如何调用javascript函数

*ngIf是Angular框架中的一个指令，用于根据条件来显示或隐藏HTML元素。当条件为真时，元素会被渲染到DOM中，否则会被移除。

在*ngIf渲染后调用JavaScript函数，可以通过以下几种方式实现：

使用ngAfterViewInit生命周期钩子函数：ngAfterViewInit是Angular中的一个生命周期钩子函数，当组件的视图初始化完成后被调用。可以在该函数中调用JavaScript函数。首先，在组件类中引入ViewChild装饰器，并在模板中标记需要渲染后调用函数的元素。然后，在ngAfterViewInit函数中通过ViewChild获取该元素的引用，并调用相应的JavaScript函数。

示例代码：

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

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="condition" #myElement>Content to be rendered</div>
  `,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('myElement') myElement: ElementRef;

  condition: boolean = true;

  ngAfterViewInit() {
    if (this.condition) {
      this.callJavaScriptFunction();
    }
  }

  callJavaScriptFunction() {
    // 调用JavaScript函数
  }
}

使用ngIf指令的else语句：ngIf指令支持使用else语句来定义一个模板块，当条件为假时显示该模板块。可以在else模板块中调用JavaScript函数。

示例代码：

<div *ngIf="condition; else elseBlock">Content to be rendered</div>

<ng-template #elseBlock>
  <div (click)="callJavaScriptFunction()">Content to be rendered when condition is false</div>
</ng-template>

使用ngDoCheck生命周期钩子函数：ngDoCheck是Angular中的一个生命周期钩子函数，用于检测组件数据的变化。可以在该函数中判断*ngIf的条件是否发生变化，并在条件为真时调用JavaScript函数。

示例代码：

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="condition">Content to be rendered</div>
  `,
})
export class ExampleComponent implements DoCheck {
  condition: boolean = true;
  previousCondition: boolean = true;

  ngDoCheck() {
    if (this.condition && !this.previousCondition) {
      this.callJavaScriptFunction();
    }
    this.previousCondition = this.condition;
  }

  callJavaScriptFunction() {
    // 调用JavaScript函数
  }
}

以上是在*ngIf渲染后如何调用JavaScript函数的几种方法。根据具体的业务需求和场景，选择适合的方式来实现。