數據目標-角度

Question

我直接使用HTML顯示dialog

<!-- 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>

但我想做些以前的事情，所以我想使用(click)通過javascript執行data-toggle="modal" data-target="#exampleModalCenter"

所以基本上這是步驟：

1- (click)="test()"

2-通過test() javascript執行data-toggle="modal" data-target="#exampleModalCenter"

為了獲得包含它的DIV ，我嘗試過：

test(){
    var dialog= <HTMLDivElement>document.getElementById(exampleModalCenter);
  }

但我找不到exampleModalCenter

Answer 1

您應該使用attr.data-target

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

Answer 2

首先，您必須在按鈕上添加點擊方法“測試”。 將模態的類名更改為“ modal fade”。 然后，您的ts文件必須是這樣的：

@ViewChild('exampleModalCenter') exampleModalCenter;

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