Question

我试图使用Angular 4 - Typescript调整我的Bootstrap框架，并且在使我的选项卡式注册表工作时有一点低迷。

在Bootstrap中，这是JS文件，在点击我的选项卡表单时添加和删除活动类。

$(document).ready(function(){
$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});

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

});

HTML文件

<div class="container">
    <div class="row">

<!-- Mixins-->
<!-- Pen Title-->
<div class="pen-title">
  <h1>Material Login Form</h1>
</div>
<div class="container">
  <div class="card"></div>
  <div class="card">
    <h1 class="title">Login</h1>
    <form>
      <div class="input-container">
        <input type="text" id="Username" required="required"/>
        <label for="Username">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Password" required="required"/>
        <label for="Password">Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Go</span></button>
      </div>
      <div class="footer"><a href="#">Forgot your password?</a></div>
    </form>
  </div>
  <div class="card alt">
    <div class="toggle"></div>
    <h1 class="title">Register
      <div class="close"></div>
    </h1>
    <form>
      <div class="input-container">
        <input type="text" id="Username" required="required"/>
        <label for="Username">Username</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Password" required="required"/>
        <label for="Password">Password</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="Repeat Password" required="required"/>
        <label for="Repeat Password">Repeat Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button><span>Next</span></button>
      </div>
    </form>
  </div>
</div>
    </div>
</div>

这是我尝试调整以使Tab工作的TS文件，但都无济于事。

clicked(event) {
    event.target.classList.add('active'); // To ADD
    event.target.classList.remove('active'); // To Remove
    event.target.classList.close('click'); // To check
    event.target.classList.toggle('click'); // To toggle
  }

我知道某处错了，但我无法弄清楚为什么我不能让它工作，而且它在使用JS的Bootstrap 3中运行良好。

Answer 1

将ngClass与条件一起使用。

已更新，可在评论区域中回答用户的问题

您可以使用Angular的（单击）侦听器来调用函数，这样您就不会需要jQuery。在下面的示例中，当单击元素（按钮或它是什么......）时，handleClick()函数将在Typescript中触发并具有该事件。您可以在活动中找到您的酒店，并使用它来确定您要控制ngClass课程的目的。

HTML

<button ngClass="{'active': mychoice}" (click)="handleClick($event)">
  // Some code here
</button>

打字稿

mychoice = false; // true if you want the class at first

handleClick(event) {
    let some_case = event.something
    if (some_case === conditionToAdd) {
       this.mychoice = true;           // case to add
    } else {
    if (some_case === conditionToToggle) {
       this.mychoice = !this.mychoice; // case to toggle
    } else {
       this.mychoice = false;          // case to remove
    }
 }

Answer 2

这样做

<div class="container" [ngClass]="{'active': containerActive}">

并且在ts

首先实例化变量：

containerActive=false

随时更改。

clicked(event) {
     this.containerActive=!this.containerActive
}

有关ng-class

的更多信息

Answer 3

好。我发现如果Bootstrap实际上可以与Angular很好地集成，我仍然可以在Angular中使用jQuery。

因此，对于任何试图让jQuery事件与Angular一起工作的人来说，这就是我所做的让它适合我的工作。

在我的HTML文件中，我向要切换的标签添加了一个点击事件

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

在我的TS文件中，我以这种方式添加了jQuery：

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');
    });

  }

}

这个jQuery将做的是将类active添加到HTML中定义的类toggle，当我关闭它时，它将删除类active。

因此，我的传统Bootstrap 3或4 Framework仍然可以与Angular携手合作。

我希望能帮助某人尽快执行任务，而不是将JS，jQuery重构为Typescript范例。

但是，请注意，在必须最初通过.angular-cli.json安装引导程序之后，必须通过Angular目录中的npm install bootstrap@3文件将Bootstrap和jQuery与Angular集成。因此style中的scripts和.angular-cli.json行变为：

"styles": [
  "styles.css",
  "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
......

如何在Angular 4，Typescript 2中添加或删除bootstrap“active”类

3 个答案: