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

我正在使用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功能，因为我只是想在Angular 4中引入一个引导（HTML、CSS、JS）应用程序，以便使我的选项卡式表单能够正常工作，因为它在引导中工作得非常好

---

但是为什么我必须在Tab按钮工作之前单击两次呢？我已经检查过了，不知道这里缺少了什么。

我不确定您使用的是哪个版本的Angular，但您不应该使用jQuery来完成这么简单的任务。试着这样做：

HTML:

不过，这很简单，因为每个“选项卡”都应该是一个具有自己的“活动”bool的组件。应用程序组件应仅包含不同“选项卡”组件的列表

---

然而，对于您的实际问题，可能是因为您正在通过angular调用

（click）=“toggleEvent（）”

，而在您的函数中，您也在调用JQuery

。On（'click'，function（））

，因此需要在响应之前单击两下。从代码中删除“.on（'click'）JQuery，它应该只需要单击一次。

我认为您正面临这个问题，因为您正试图用多个相互矛盾的库来存档它。您可以完全放弃JQuery，使用纯Angular Typescript编写此实现，也可以使用JQuery来存档此实现，而不受Angular的干扰

---

这样，就很难确定问题来自何处以及如何最好地解决它。

好的。我已经弄明白了，我想把我用过的东西贴出来会帮助很多人。我发现第一次单击初始化，第二次执行操作。为了更好地解决这个问题，我使用了Angular

ngonit（）

lifecyclehook。我没有创建新的单击事件，而是将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首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件，这将使该操作在页面加载后立即生效。

现在我不知道为什么有人必须在此处标记我。因为不是编写代码，您已链接到另一个页面。在你的问题中输入代码。我链接到了我的代码和解决方案。为什么我必须保持干燥？有人会说我应该链接到解决方案。此外，你降低分数的目的与研究工作无关首先，我不是降低你分数的那个人。第二，贬低某人不一定与研究工作有关。第三，如果你需要帮助，你有责任以最简单、最方便的方式提供问题的细节，让回答问题的人能够帮助你。链接到另一篇SO文章并不是世界上最方便的事情。没关系，这样不行。Angular将抱怨未解决的

活动
变量，您必须将
此
添加到
活动=！活跃的这样您将拥有
this.active=！这是积极的编辑并发布整个html，或者至少包含.close和.toggle的元素。我已经修复了它。谢谢你的努力。
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');
    });
  }

}

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