Question

在Angular 4中使用带有jQuery功能的选项卡式表单。我的选项卡式表单有效但我注意到在响应之前我必须单击选项卡按钮两次。以下是摘录：

TS

declare var jquery: any;
declare var $: any;

export class AppComponent {
  title = 'Angular App';

  toggleEvent() {
    $('.toggle').on('click', function() {
      $('.container').stop().addClass('active');
    });
    $('.close').on('click', function() {
      $('.container').stop().removeClass('active');
    });

  }

}

HTML

<div class="card alt" (click)="toggleEvent()">
..
..
</div>

所以你知道，我已经为我的Angular 4添加了jQuery功能，因为我只是想将一个Bootstrap（HTML，CSS，JS）应用程序引入到Angular 4中，以便让我的Tabbed Form工作正常工作完美地在引导程序中。

但为什么我必须在它工作之前点击Tab键两次？我已经检查过，我不知道这里缺少什么。

Answer 1

我认为您正面临这个问题，因为您正尝试使用多个处于loggerhead的库来存档此问题。您可以完全放弃JQuery并使用纯Angular-Typescript编写此实现，或者使用JQuery代替存档而不使用Angular干扰。

有了这个，很难确定问题的来源以及如何最好地解决问题。

Answer 2

我不确定您使用的是哪个版本的Angular，但是您不应该使用jQuery这么简单。尝试这样的事情：

HTML：

<div class="card alt" (click)="toggleEvent()">
    <div class="container" [class.active]="active">
     ...
    </div>
</div>

TS：

export class AppComponent {
  title = 'Angular App';
  active = true;

  toggleEvent(){
     this.active = !this.active;
  }     
}

但这简化了，因为每个＆＃34; Tab＆＃34;应该是一个有自己的＆＃34;活跃＆＃34;布尔。应用程序组件应该只包含不同的＆＃34; Tab＆＃34;组件。

关于你的实际问题，可能是因为你通过角度调用了(click)="toggleEvent()"中的函数，而在你的函数中你还调用了JQuery {{ 1}}，因此在响应之前需要两次单击。从你的代码中删除`.on（＆＃39;点击＆＃39;）JQuery，它只需要点击一下。

Answer 3

好。我已经弄清楚了，我认为发布我用过的东西会帮助这么多人。我想出了第一次点击初始化，第二次采取了行动。为了更好地解决这个问题，我使用了Angular ngOnInit()生命周期钩子。我没有创建新的click事件，而是将jQuery包装在ngOnInit()中，以便TS文件变为：

import { Component, OnInit } from '@angular/core';

declare var jquery: any;
declare var $: any;

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $('.toggle').on('click', function() {
      $('.container').stop().addClass('active');
    });
    $('.close').on('click', function() {
      $('.container').stop().removeClass('active');
    });
  }

}

使用此功能，您无需在HTML文件中添加任何点击事件。 HTML变为：

<div class="card alt">
..
..
</div>

ngOnInit()在Angular首次显示数据绑定属性并设置指令/组件的输入属性之后初始化指令/组件，这将使页面加载时立即生效。

为什么我必须在响应之前单击Tab按钮两次？

3 个答案: