无法在 Angular 中使用 jquery

Question

我正在尝试创建一个 +/- 数量框。为此，我在这里使用了 jQuery 代码。当我使用它时，我发现了一个错误。这是我的代码：-

details.component.ts

import { Component, OnInit } from '@angular/core';
declare var $: any;

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

  constructor() { }

  ngOnInit() {
  
    function incrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
      if (!isNaN(currentVal)) {
        parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
      } else {
        parent.find('input[name=' + fieldName + ']').val(0);
      }
    }
    
    function decrementValue(e) {
      e.preventDefault();
      var fieldName = $(e.target).data('field');
      var parent = $(e.target).closest('div');
      var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
      if (!isNaN(currentVal) && currentVal > 0) {
        parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
      } else {
        parent.find('input[name=' + fieldName + ']').val(0);
      }
    }
    
    $('.input-group').on('click', '.button-plus', function(e) {
      incrementValue(e);
    });
    
    $('.input-group').on('click', '.button-minus', function(e) {
      decrementValue(e);
    });
    

  }

  

}

details.component.html

<app-home></app-home>
<br/><br/>




<style>
 
input,
textarea {
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 10px;
}

input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}
</style>







<div class="row container mt-5 mr-5">
<div class="col-3 mr-2">
<h6>CATEGORIES</h6>
<hr>
<small><b>BRACELETS</b></small>
<br/><br/>
<small><b>EARRINGS</b></small>
<br/><br/>
<small><b>NECKLACES</b></small>
<br/><br/>
<small><b>RINGS</b></small>
<br/><br/>


</div>




<div class="col-3">

    
   
</div>


<div class="col-5 offset-1">
   
    
        <p><b>Quantity</b></p>
        <div class="input-group">
            <input type="button" value="-" class="button-minus" data-field="quantity">
            <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field">
            <input type="button" value="+" class="button-plus" data-field="quantity">
          </div>
          
</div>


</div>



 <router-outlet></router-outlet>

angular.json

//other code
           "styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
              "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
              "node_modules/animate.css/animate.css",
              "src/styles.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.cs",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/chart.js/dist/Chart.js",
              "node_modules/hammerjs/hammer.min.js"
            ]
          }
        },


//other code

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

当我运行这个应用程序时，我发现了这个错误：-

我不明白我如何在 angular10 中使用 jQuery。我将在哪里编写 jQuery 代码？请帮帮我。

Answer 1

当您针对这种特定情况使用 Angular 框架时，我看不出使用 jQuery 的原因。

您应该使用双向绑定和单击事件来触发一切。 Here's a Stackblitz demo.

Ref docs for two-way binding, ref docs for event binding

在我的组件中我有：

export class AppComponent {
  quantity = 0;

  decrementValue() {
    this.quantity > 0 ? this.quantity-- : (this.quantity = 0);
  }

  incrementValue() {
    this.quantity++;
  }
}

在我的 HTML 中（我复制了您的代码并添加了双向绑定和事件处理）

<div class="input-group">
    <input type="button" value="-" class="button-minus" data-field="quantity" (click)="decrementValue()">
    <input type="number" step="1" max="" value="1" name="quantity" class="quantity-field" [(ngModel)]="quantity">
    <input type="button" value="+" class="button-plus" data-field="quantity" (click)="incrementValue()">
</div>

Answer 2

您已在 ngOnInit() {} 中添加了 incrementValue(e) and decrementValue(e) 删除函数，并从 ngOnInit() 中单击 jQuery 并将其放置在 ngOnInit() 之外

还可以在函数中添加类型，例如incrementValue(e: any)