Angular-替換jQuery

Question

我試圖在我的代碼中通過jQuery使用Anuglar，並開始痛苦的過渡。

在我的AppComponent中，我有：

HTML：

 <div class="login-wrapper toggle-content">
    <button class="close" type="button"><span aria-hidden="true">×</span></button>
     <iframe
        id="loginframe"
        [src]="framesrc"
        width="100%"
        height="100%"
      >Loading...</iframe>
</div>

jQuery的：

/* --------- Login widget toggle ----------- */
$(document).on('click', '#loginButton', function () {

  console.log("loginButton clicked");
  if (can3rdparty) {
    $('.toggle-content').slideToggle();
  } else {
    var popup = window.open(this.framesrc, '_blank', 'height=500,width=900');
  }
});

如何為此使用純Angular / JavaScript？

Answer 1

<button #viewChildHandle (click)="myFunction" class="close" type="button"><span aria-hidden="true">×</span></button>

在控制器類中，您需要使用@ViewChild批注獲取元素的句柄。 然后，當您擁有句柄時，可以使用jQuery包裝viewChild元素，就像使用jQuery包裝普通HTML元素一樣。

myFunction() {
   $(viewChildEl).slideToggle();
}