Angular - 取代jQuery

Question

我正在尝试在我的代码中使用Anuglar而不是jQuery，并开始了痛苦的过渡。

在我的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();
}