Question

Related Question
但这并不完全一样。我有两个组成部分。一个组件具有输入，另一个组件具有按钮。现在，我希望在输入字段中单击按钮时填充一些文本，该按钮由不同的组件呈现。

input.component.html

<input #input type="text-area"/>

button.component.html

<li (click)="addText($event)">Click Me !!</li>

button.component.ts

@ViewChild('input') private input; addText(event){
    console.log(this.input); //this is undefined 
}

项目结构：

./ input / input.component.ts
./输入/ input.component.html
./ button / button.component.ts
./按钮/ button.component.html

我知道我可以使用服务，然后有一个observable来收听并订阅它以识别更改，但我只是想避免这种情况，因为上面超链接中接受的答案看起来更简单。

Answer 1

使用单独的服务执行此操作。您可以通过调用服务上的set方法将值从按钮组件推送到服务。您可以通过使用主题并订阅它来获取服务到输入组件的值。希望这会有所帮助。

Answer 2

根据链接中的示例，我建议采用以下解决方案。由于这两个组件是兄弟，使用@Viewchild来获取子DOM元素的引用。 @Input和@Output将有助于沟通。

<强> parent.component.html

   <div class="wrapper">
      <comp1 #comp1 [myText]="name"></comp1>
      <comp2 (clickEvent)="addText()"></comp2>
   </div>

<强> parent.component.ts

  import { ViewChild } from '@angular/core';
  ...

  name = 'Angular'; 

  @ViewChild('comp1') private comp1;

  addText(event) {
    this.comp1.myInput.nativeElement.focus();
    let startPos = this.comp1.myInput.nativeElement.selectionStart;
    let value = this.comp1.myInput.nativeElement.value;
    this.comp1.myInput.nativeElement.value =
      value.substring(0, startPos) + ' rocks! ' + value.substring(startPos, value.length)
  }

<强> button.component.html

  <ul>
     <li (click)="clickEventMethod()"> Click here to add some text </li>
  </ul>

<强> button.component.ts

  import { Output, EventEmitter } from '@angular/core';
  ...
  @Output() clickEvent = new EventEmitter<boolean>();

  clickEventMethod() {
    this.clickEvent.emit();
  }

<强> input.component.html

  <input [(ngModel)]="myText" #myInput type="text" placeholder="Enter some text">`,

<强> input.component.ts

   import { ViewChild, Input } from '@angular/core';
   ...
   @ViewChild('myInput') private myInput;
   @Input() private myText;

<强> DEMO

Angular：向按钮上的现有输入字段添加文本单击“输入”和“按钮由两个不同的组件呈现的位置”

2 个答案: