如何使用 Angular 4 中的 onClick 事件在 Angular 4 中获取跨度值

Question

我在一个 Angular 4 项目中工作，在这个项目中，我需要获取图像 Onclick 上 Span 标记中的值。 我提到了一些 Stackoverflow 问题，但对我没有任何帮助......

这是我的 HTML。

 <div class="col-sm-4">
     <div class="card">
         <div class="card-img-top card-img-top-250 one">
             <img  class="img-fluid" "src="assets/Images/Popular_Products/3.jpg" alt="img1">
             <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" onclick="getProductName()" >
          </div>
          <div class="card-block pt-2">
              <div class="col-sm-12 text-center card-text">
                  <span #Pname> iPhone</span>
                  <br>
                  <br>
                  1500 $
              </div>
          </div>
      </div>
  </div>

这是我的 .ts 文件

getProductName(Pname: string) {
      this.http.get(`http://localhost:57036/api/data/CartCount/?ProductName=${Pname}`)
               .subscribe(data => this.res = (data['ITEM_QTY']),
                         error => console.error(error));       
} 

当我单击图像时，我想获取跨度标记中的值并将其传递给 API，但在我的情况下我无法获取跨度值。 我是 Angular4 的新手，请指导我解决这个问题。

Answer 1

你可以这样做：

在标记中：

<div class="col-sm-4">
    <div class="card">
        <div class="card-img-top card-img-top-250 one">
            <img  class="img-fluid" src="assets/Images/Popular_Products/3.jpg" alt="img1">
            <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" (click)="getProductName(Pname)" >
        </div>
        <div class="card-block pt-2">
            <div class="col-sm-12 text-center card-text">
                <span #Pname> iPhone</span>
                <br>
                <br>
                1500 $
            </div>
        </div>
    </div>
</div>

在组件中：

getProductName(Pname: any) {
    console.log(Pname.textContent)
}

Answer 2

<img routerLink="/my-cart" class="..." src="..." onclick="getProductName()" >

首先，在您的图像标签中添加一个右斜杠。每个标签都应该关闭。
其次，您正在使用 Angular。如果您想要 Angular 上下文，请使用 Angular 语法。
第三，您的图像上不能有 routeLink 和点击处理程序。好吧，你可以，但你会遇到奇怪的行为。

这是您更新后的图片。

<img class="..." src="..." (click)="getProductName()" />

现在，您可以获得跨度值，并路由到您的路线。

getProductName() {
  const productName = this.Pname.nativelement.innerText;
  // Do what you want here, then route :
  this.router.navigate(['/my-cart']);
}

记住导入所需的依赖项，在构造函数中声明它们，并作为类成员。

import { Router } from '@angular/router';
import { ViewChild, ElementRef } from '@angular/core';

// ...

@ViewChild('Pname') Pname: ElementRef;

constructor(private router: Router) {}

Answer 3

你需要在这里修改一些东西：

angular 的点击事件为：

<img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="img2" (click)="getProductName(Pname)" >

函数为：

getProductName(Pname: string) {
      let spanContent = <HTMLSpanElement>Pname.innerHTML;      
}