Question

我有html按钮：

<button ion-button class="button icon ion-home" round (click)="getColor()" id="one">0</button>

单击此按钮时，我需要获取此按钮的值（＆＃39; 0＆＃39;在这种情况下）。

这是我的angular代码：

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

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {

  }
  getColor() { 
    document.getElementById("one").nodeValue="0";

  }

}

我真的试了几个小时才能做到这一点，但我无法做到。我是angular的新手。有人请帮帮我这件事吗？

Answer 1

/ *********

**编辑：**

我使用按钮文本添加了输入值的设置。

********** /

使用ElementRef和ViewChild是一种方式

<强> ElementRef    - 是最基本的抽象。如果您观察它的类结构，您将看到它只保存与其关联的本机元素。它对于访问本机DOM元素
很有用
//

@ViewChild -   Angular提供了一种称为DOM查询的机制。它以@ViewChild装饰器的形式出现。   您可以使用ViewChild获取   第一个元素或与视图中的选择器匹配的指令   DOM。

来自doc ..

基本上是对你的html代码中的一个元素＆＃39; id＆＃39; （但是以有棱角的方式 - 不是id =＆＃34; ......＆＃34;）像#someId这样的东西，你可以使用

访问该元素对象

@ViewChild('someId') myElement: ElementRef

可在此处阅读Exploring Angular DOM manipulation

代码：

 <button #btn
      ion-button class="button icon ion-home" round 
      (click)="getColor()">
      0
 </button>
 <ion-input #myInput></ion-input>

// ==================

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

 import { NavController, TextInput } from 'ionic-angular';

 @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
 })
 export class HomePage {

      @ViewChild('btn') btn: ElementRef;
      @ViewChild('myInput') myInput: TextInput;

      constructor(public navCtrl: NavController) {}
      getColor() { 
           const btnText = this.btn.nativeElement.textContent;
           this.myInput.value = btnText; // here you set the value of the
                                         // input to the text on your button
      }
 }

// ============================================= ================ //

作者方法，将HTML对象作为参数发送到您调用的函数（单击）

 <button #btn
      ion-button class="button icon ion-home" round 
      (click)="getColor(btn)">
      0
 </button>
 <ion-input #myInput></ion-input>

// =====================

 import { Component, ViewChild } from '@angular/core';
 import { NavController, TextInput } from 'ionic-angular';

 @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
 })
 export class HomePage {

      @ViewChild('myInput') myInput: TextInput;

      constructor(public navCtrl: NavController) {}
      getColor(myBtn: HTMLButtonElement) { 
            this.myInput.value = myBtn.innerHTML;
      }

 }

// ============================================= ================ //

还有一种方式，也许最简单的方法是使用属性绑定。

绑定＆＃39;值＆＃39;具有类成员的离子输入特性。

 <button #btn
      ion-button class="button icon ion-home" round 
      (click)="getColor(btn)">
      0
 </button>
 <ion-input [value]="inputValue"></ion-input>

// =====================

 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';

 @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
 })
 export class HomePage {

      inputValue: string = "";

      constructor(public navCtrl: NavController) {}
      getColor(myBtn: HTMLButtonElement) { 
            this.inputValue = myBtn.innerHTML;
      }

 }

Answer 2

使用$ event属性，该属性将包含有关被点击元素的信息，大概是$event.target：

在您的HTML中：

(click)="getColor($event)"

在您的TS文件中：

getColor ($event: any) {
    // debug the value of $event
}

或者使用传递＆＃34; 0＆＃34;提供的@RobYed方法。作为论点。

Answer 3

在Html中

<button ion-button class="button icon ion-home" round (click)="getColor()" id="one">{{value}}</button>

在Angular中

export class HomePage {
  value: number = 0;
  constructor(public navCtrl: NavController) {

  }
  getColor() { 
    console.log(this.value);
  }
}

首先在Component中定义变量，然后在html中使用它。这样您就可以轻松访问它。

如何获取Button值并将其设置为角度/离子输入

3 个答案: