时间戳

首页 > 解决方案 > 从 typescript 文件访问 DOM

angular - 从 typescript 文件访问 DOM

问题描述

$('#myModal').modal('show'); $('#myModal').modal('hide'); 这是我们从 js 文件中打开模式的方式。我现在正在使用 Angular 5。如何从 .t​​s 文件中打开模式？要非常清楚如何在 Angular 5 中从 .ts 文件中与 DOM 对话，就像document.getElementById("demo")我们在 js 文件中使用的那样。

<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)" data-toggle="modal" data-target="***********">
  </canvas>
</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)" data-toggle="modal" data-target="**************">
  </canvas>
</div>

这是我的代码。我写了 ***** 来代替模态目标，因为函数调用 (chartClick)="eventChartClicked($event)有 2 个条件。对于每个条件，我都不想从我的打字稿文件中打开一个模式。在这里我也不能使用按钮。

标签： angulardombootstrap-modal

解决方案

在文件中工作的代码.js应该在.ts文件中工作，所以如果你document.getElementById("demo")在你的 JS 文件中使用，那么这段代码也可以在打字稿文件中工作。

例如

<button id="demo" [hidden]="true" data-toggle="modal" data-target="#myModal">Open Modal</button>


document.getElementById("demo").click();

你可以参考这个问题——

推荐阅读