Javascript 数据目标-角度

我直接使用HTML显示一个

对话框

<!-- Dialog -->
      <div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h3 class="modal-title" id="exampleModalLongTitle">Something went wrong</h3>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <h5 class="modal-title" id="exampleModalLongTitle">Maximum 10 messages selected</h5>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary">Ok</button>
            </div>
          </div>
        </div>
      </div>

<button data-toggle="modal" data-target="#exampleModalCenter">RunIt</button>

---

但是我找不到

示例ModalCenter

您应该使用

属性数据目标

<button data-toggle="collapse" 
        [attr.data-target]="'#exampleModalCenter">RunIt
</button>

RunIt

首先，您必须将单击方法“测试”添加到按钮。将模态的类名更改为“模态衰减”。之后，您的ts文件必须如下所示：

@ViewChild('exampleModalCenter') exampleModalCenter;

test() {
  this.exampleModalCenter.nativeElement.className = 'modal fade show';
}

---

不，不。我的HTML代码正在运行，但我需要用javascript来检查一些东西before@MarioLópez你能添加

javascript

代码吗？我只需要说如果（x>10）显示对话框，如果没有，调用其他方法您可以在

单击
方法中添加此条件@ViewChild我找不到exampleModalCenter-->“@ViewChild（'exampleModalCenter'）exampleModalCenter；”您最上面的div是这样的吗？你能像我写的那样把“#exampleModalCenter”添加到你的顶部div吗？
@ViewChild('exampleModalCenter') exampleModalCenter;

test() {
  this.exampleModalCenter.nativeElement.className = 'modal fade show';
}