Angular多区块使用BootstrapPersianDateTimePicker切换后失效问题

问题原因 #

• Angular的*ngIf指令会直接从DOM中移除元素，切换回目标区块时，#date-text是全新生成的DOM节点，未重新初始化日期选择器。
• 原代码中动态导入的RunScript.js仅在首次执行时初始化一次，后续DOM变化无法触发重新初始化。

修复方案 #

1. 调整组件模板，使用Angular模板引用变量 #

替换原DOM选择器方式，用模板引用变量更安全地获取元素：

<section *ngIf="isShow=='section1' ">                        
   <div class="col-md-4">                                                                        
      <input type="text" class="form-control" #dateText >
      <input type="hidden" #dateValue> <!-- 用于存储格式化日期值的隐藏输入框 -->
   </div>
</section>
<section *ngIf="isShow=='section2' ">
  <!-- 区块2内容 -->
</section>

2. 组件类中控制日期选择器初始化时机 #

利用Angular生命周期钩子，在DOM更新后检查并初始化日期选择器：

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

// 声明全局mds变量，避免TypeScript类型报错
declare var mds: any;

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewChecked {
  isShow = 'section1';
  @ViewChild('dateText') dateText!: ElementRef;
  @ViewChild('dateValue') dateValue!: ElementRef;
  private isDatePickerInit = false;

  ngAfterViewChecked(): void {
    // 仅在区块1显示、DOM元素存在且未初始化时执行
    if (this.isShow === 'section1' && this.dateText?.nativeElement && !this.isDatePickerInit) {
      this.initPersianDatePicker();
    }
    // 切换到其他区块时重置初始化标记，确保切回时重新初始化
    if (this.isShow !== 'section1') {
      this.isDatePickerInit = false;
    }
  }

  private initPersianDatePicker(): void {
    new mds.MdsPersianDateTimePicker(this.dateText.nativeElement, {
      targetTextSelector: this.dateText.nativeElement,
      targetDateSelector: this.dateValue.nativeElement
    });
    this.isDatePickerInit = true;
  }

  // 区块切换方法示例
  switchSection(section: string): void {
    this.isShow = section;
  }
}

3. 移除冗余的动态导入 #

删除原RunDateScript方法和单独的RunScript.js文件，将初始化逻辑直接整合到组件类中，便于控制执行时机。

关键修改点说明 #

• 使用@ViewChild替代document.querySelector，符合Angular组件化规范，避免全局DOM选择的潜在问题。
• 通过ngAfterViewChecked钩子监听DOM变化，确保每次区块切换后都能正确初始化日期选择器。
• 添加初始化状态标记，防止重复创建日期选择器实例导致的冲突。

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