angular6中如何根据选择的其他文本获取textarea值？

Question

我有一个主文本区域字段，我应该在其中添加一个内容。我还有其他三个文本区域字段，我将在其中显示一些默认内容。如果用户单击这三个文本区域中任何一个的内容，该内容应显示在主文本区域内容字段中。

<div class="col-sm-8 col-md-5 col-lg-4">
      <textarea #content type="text" class="form-control">   </textarea>
    </div>
    <div class="col-sm-8 col-md-5 col-lg-4" (click)="setContent(content1.value)">
      <textarea #content1 type="text" name="content" [(ngModel)] = "content4" class="form-control" > Content 1 </textarea>
    </div>
    <div class="col-sm-8 col-md-5 col-lg-4">
      <textarea #content2 type="text" name="content5" [(ngModel)] = "content" class="form-control">Content 2
      </textarea>
    </div>
    <div class="col-sm-8 col-md-5 col-lg-4">
      <textarea #content3 type="text" name="content6" [(ngModel)] = "content" class="form-control"> content 3 </textarea>
    </div>

我应该如何获取值并将其显示在主要内容中。有人可以帮我解决这个问题吗？

Answer 1

您可以通过多种方式做到这一点。这是一个：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  mainContent = '';

  setContent(value) {
    this.mainContent = value;
  }

}

这是您的模板：

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    [(ngModel)]="mainContent" 
    type="text" 
    class="form-control">
  </textarea>
</div>

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    #content1 
    type="text" 
    name="content" 
    class="form-control" 
    (click)="setContent(content1.value)">
    Value 1
  </textarea>
</div>

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    #content2 
    type="text" 
    name="content" 
    class="form-control" 
    (click)="setContent(content2.value)">
    Value 2
  </textarea>
</div>

<div class="col-sm-8 col-md-5 col-lg-4">
  <textarea 
    #content3 
    type="text" 
    name="content" 
    class="form-control" 
    (click)="setContent(content3.value)">
    Value 3
  </textarea>
</div>

这里有一个StackBlitz供参考。看看我在这个答案中添加的模板的下半部分。

angular6中如何根据选择的其他文本获取textarea值？

How to get textarea value displayed based on the selection of other text in angular 6?

html

textarea

click

angular

angular6