Question

我想通过按钮点击触发按钮点击功能来访问组件类中的textarea值的 HTML

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-12">

        <textarea class="form-control" placeholder="Add Comment">
         {{comment}}
        </textarea>
      <button (click)="addComment($event, comment)" style="margin-top: 2%" class="btn-success">Add Comment</button>
    </div>
  </div>
</div>

组件：

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

@Component({
  selector: 'app-add-comments',
  templateUrl: './add-comments.component.html',
  styleUrls: ['./add-comments.component.css']
})
export class AddCommentsComponent implements OnInit {

  comment:string = "Hellooooo";


  //commentsArr: commentsArr[];

  addComment(event, comment);

  addComment(event, comment)
  {
    console.log(this.comment);


  }

  constructor() { }

  ngOnInit() {
  }

}

我想访问评论组件中的评论数据中的评论。

Answer 1

您应该在textarea上使用属性替换，而不是直接使用comment。一个例子：

<form (ngSubmit)="formHandler()" #form="ngForm">
    <textarea 
      name="your-name"
      [(ngModel)]="comment">
    </textarea>
    <button (click)="addComment()">
</form>

然后在addComment()上使用this.comment访问它的值。当用户在textarea中输入时，ngModel将自动更新属性comment的值。

Answer 2

方法1

您可以将输入字段设为模板变量，如#comment，并可以在点击时将值传递给方法。 e.g

<input type="text" #comment>
<button (click)="addComment(#comment.value)">Add Comment</button>

您的addComment方法将

addComment(comment){
console.log(comment)
}

您的代码将是

<div class="container">
      <div class="row">       
 <div class="col-lg-4 col-sm-12">
            <textarea #comment class="form-control" placeholder="Add Comment">
             {{comment}}
            </textarea>
          <button (click)="addComment(comment.value)" style="margin-top: 2%" class="btn-success">Add Comment</button>
        </div>
      </div>
    </div>

<强> addComment

addComment(comment)
  {
    console.log(comment);
  }

方法2

由@Treeindev分享

<form (ngSubmit)="formHandler()" #form="ngForm">
    <textarea 
      name="your-name"
      [(ngModel)]="comment">
    </textarea>
    <button (click)="addComment()">
</form>

方法3

由@Dheeraj Kumar分享

<textarea class="form-control" [(NgModel)]=comment placeholder="Add Comment">
<input type="button" value="Add" (click)="AddComment()" />

comment:any="";

AddComment(){

console.log(this.comment);
}

Answer 3

Angular 2 +中没有范围变量。

在Angular 2+中，有NgModel可以帮助你进行双向绑定。

https://angular.io/api/forms/NgModel

访问组件中文本区域的值。

在html中

<textarea class="form-control" [(NgModel)]=comment placeholder="Add Comment">
<input type="button" value="Add" (click)="AddComment()" />

在组件中：

comment:any="";

AddComment(){

console.log(this.comment);
}

这里注释var将始终映射到textarea中的输入。

Answer 4

您可以尝试

HTML：

function owlInitialize() {
   if ($(window).width() < 1024) {
      $('#carousel').owlCarousel();
   }else{
      $('#carousel').owlCarousel('destroy');
   }
}

$(document).ready(function(e) {
   owlInitialize();
});

$(window).resize(function() {
   owlInitialize();
});

TS：

<textarea [(ngModel)]='myText'></textarea>
<button (click)="doSomething()">Click</button>

Answer 5

我们可以使用双向绑定或@ViewChild来获取模板中元素的引用。

Live Demo

TS：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  comment:string = "Hellooooo";
  @ViewChild('textAreaRef') myLocalRef; //Here we create a marker in the element and refer the element using @ViewChild and assigning it to myLocalRef
  addComment()
  {
    console.log(this.myLocalRef.nativeElement.value);
  }
}

模板：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <textarea 
        class="form-control" 
        placeholder="Add Comment"
        #textAreaRef>
        {{comment}}
      </textarea>
      <hr>
      <button (click)="addComment()" style="margin-top: 2%" class="btn-success">Add Comment</button>
    </div>
  </div>
</div>

Answer 6

From Angular 2+ the support of $scope has been removed, so when you want to access an element defined on a template into the TS file, this can be done in 3 ways:

 1. Local Reference
 2. @ViewChild
 3. Two-way binding

When you just want to pass the value on some action without binding then #1 and #2 is the option, or we can define a variable in TS file and bind it to an element in the template file using two-binding.

    enter code here

**1. Example using Local Reference:**
**Template:**
 <textarea #textAreaRef>{{comment}}</textarea>
 <button (click)="addComment(textAreaRef)">Add Comment</button>

**TS:**
 addComment(value:HTMLTextAreaElement)
  {
    console.log(value);
  }

**2. Example using @ViewChild and Local Reference:**
**Template:**
 <textarea #textAreaRef>{{comment}}</textarea>
 <button (click)="addComment()">Add Comment</button>

**TS:**
@ViewChild('textAreaRef') referenceEl: ElementRef;
 addComment()
  {
    console.log(referenceEl.nativeElement.value);
  }
Here we don't need to pass the local reference on button click.

**3. Example using Two-way data binding:**
**Template:**
 <textarea [(ngModel)]='comments'>{{comments}}</textarea>
 <button (click)="addComment()">Add Comment</button>

**TS:**
comments: string = "";

 addComment()
  {
    console.log(this.comments);
  }

如何以角度4访问模型或视图变量以进行双向数据绑定

6 个答案: