Question

因此，我正在尝试与mainComponent

中textarea中的值进行交互

main.component.ts

<form 
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">
    <textarea
      formControlName="formControlTextarea">
    </textarea>
</form>
<app-button></app-button>

main.module.ts

@NgModule({
  imports: [ ... ],
  declarations: [ ButtonDirective ]
})

button.component.html

<button 
  (click)="handleClick()">{{ label }}</button>

button.component.ts

import { Output, EventEmitter } from "@angular/core"
...
export class ButtonComponent {
  @Output() clickEvent = new EventEmitter();

  handleClick() {
    this.clickEvent.emit(this.label); // not really pertinent
  }
}

button.directive.ts

import { HostListener } from '@angular/core';
...
export class ButtonDirective {
  @HostListener('click', ['$event.target']) onclick(btn) {
    // how do I get value from textarea, as I ultimately 
    // want this button to insert more text when clicked, 
    // among other things like check cursor position
  }
}

不确定我是否做对了。从组件指令到另一个组件的交互还需要什么？

Answer 1

据我了解，您的问题是

solution

app.component.html：

<div class="container">

    <mat-card>

        <mat-card-header>
            Angular Material Basic Keyboard
        </mat-card-header>

        <textarea readonly class="col" matInput [value]="numberArray.join('')">

      </textarea>

        <div class="row">
            <div class="col">
                <button (click)="addNumber('1')" buttonDirective mat-button>1</button>
            </div>
            <div class="col">
                <button (click)="addNumber('2')" buttonDirective mat-button>2</button>
            </div>
            <div class="col">
                <button (click)="addNumber('3')" buttonDirective mat-button>3</button>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <button (click)="addNumber('4')" mat-button>4</button>
            </div>
            <div class="col">
                <button (click)="addNumber('5')" mat-button>5</button>
            </div>
            <div class="col">
                <button (click)="addNumber('6')" mat-button>6</button>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <button (click)="addNumber('7')" mat-button>7</button>
            </div>
            <div class="col">
                <button (click)="addNumber('8')" mat-button>8</button>
            </div>
            <div class="col">
                <button (click)="addNumber('9')" mat-button>9</button>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <button (click)="addNumber('*')" mat-button>
            *
          </button>
            </div>
            <div class="col">
                <button (click)="addNumber('0')" mat-button>
            0
          </button>
            </div>
            <div class="col">
                <button (click)="numberArray.pop()" mat-button>
            <
          </button>
            </div>
        </div>

    </mat-card>

</div>

app.component.ts：

numberArray: Array<string> = [];
  addNumber(number){
    this.numberArray.push(number.toString());
  }

Angular：从按钮指令的textarea获取价值？

1 个答案: