Angular 5：如何从.ts文件操作DOM并按条件打开模态框？

在Angular 5里控制模态框和操作DOM，真的不用像原生JS那样直接用document.getElementById，Angular提供了更贴合组件化思想的方式，我来帮你一步步实现需求：

首先，假设你的两个模态框是这样的（如果还没写的话），给每个模态框加上模板引用变量（比如#eventModal和#registrantModal），这样Angular就能在组件类里获取到它们的引用：

<!-- 事件详情模态框 -->
<div #eventModal class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Event Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 这里放事件相关的内容 -->
      </div>
    </div>
  </div>
</div>

<!-- 注册者详情模态框 -->
<div #registrantModal class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Registrant Details</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 这里放注册者相关的内容 -->
      </div>
    </div>
  </div>
</div>

把原来的data-toggle和data-target属性去掉，因为我们要从组件类（.ts文件）里控制模态框的显示：

<div class=" col-sm-6 clearPadding">
  <div class="addBottomPadding">
    <h2>Events</h2>
  </div>
  <div class="addTopPadding" *ngIf="flagEvent">
    <canvas baseChart 
            [data]="eventPieChartData" 
            [labels]="pieChartLabels" 
            [chartType]="pieChartType" 
            (chartHover)="chartHovered($event)" 
            (chartClick)="eventChartClicked($event)">
    </canvas>
  </div>
</div>

<div class="col-sm-6 clearPadding">
  <div class="addBottomPadding">
    <h2>Registrants</h2>
  </div>
  <div class="addTopPadding" *ngIf="flagUser">
    <canvas baseChart 
            [data]="usersPieChartData" 
            [labels]="pieChartLabels" 
            [chartType]="pieChartType" 
            (chartHover)="chartHovered($event)" 
            (chartClick)="regChartClicked($event)">
    </canvas>
  </div>
</div>

在你的组件.ts文件里，用@ViewChild来获取模态框的DOM引用，然后在图表点击的方法里根据条件打开对应的模态框：

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

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 通过模板引用变量获取模态框的DOM元素
  @ViewChild('eventModal') private eventModal!: ElementRef;
  @ViewChild('registrantModal') private registrantModal!: ElementRef;

  // 你的现有变量（示例）
  flagEvent = true;
  flagUser = true;
  eventPieChartData = [/* 你的数据 */];
  usersPieChartData = [/* 你的数据 */];
  pieChartLabels = ['Label1', 'Label2'];
  pieChartType = 'pie';

  // 事件图表点击事件处理
  eventChartClicked(event: any) {
    // 这里根据你的业务条件判断要打开哪个模态框
    // 举个例子：根据点击的图表扇区标签判断
    const clickedItem = event.active[0];
    if (clickedItem) {
      const label = clickedItem.label;
      if (label === '需要打开事件模态框的条件') {
        this.openModal(this.eventModal);
      } else {
        this.openModal(this.registrantModal);
      }
    }
  }

  // 注册者图表点击事件处理
  regChartClicked(event: any) {
    // 同样的逻辑，根据你的条件判断
    const clickedItem = event.active[0];
    if (clickedItem) {
      const label = clickedItem.label;
      if (label === '需要打开注册者模态框的条件') {
        this.openModal(this.registrantModal);
      } else {
        this.openModal(this.eventModal);
      }
    }
  }

  // 封装打开模态框的通用方法
  private openModal(modal: ElementRef) {
    // 调用Bootstrap的modal('show')方法打开模态框
    (modal.nativeElement as HTMLElement).modal('show');
  }
}

• 为什么不用document.getElementById？：Angular的组件有视图封装机制，直接用原生DOM方法可能会找不到元素，而且不符合Angular的组件化设计思想，@ViewChild是Angular官方推荐的获取组件内DOM元素的方式。
• 确保Bootstrap JS已引入：要让modal('show')生效，你需要在项目中引入Bootstrap的JavaScript文件（可以在angular.json的scripts数组里添加node_modules/bootstrap/dist/js/bootstrap.min.js）。
• 类型安全：我们把nativeElement断言为HTMLElement，这样TypeScript不会报错，也能获得更好的代码提示。

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