Question

我有一个自定义视图，这是一种指令，我想在其中将值发送到作为组件的主视图。我是TypeScript的新手，但我已经查看了许多示例，但是它们是当用户单击某个地方以触发向其他组件或服务传递价值的事件时出现的。我想知道如何在输入textarea组件时读取和发送一个值。感谢您的帮助

**text-area.component.html**

<textarea #inputField (ngModelChange)="onValueChanged($event)" [@slideInOut]="textAreaOpen"
          [ngClass]="{'tweet-box-shadow': true, 'hidden': this.openTextArea === false ? 'hidden' : ''}"
          aria-hidden="true" autofocus></textarea>

text-area.component.ts

 @ViewChild('inputField')
  inputField: any;

  textAreaOpen: string = 'in';


  @Output() voted = new EventEmitter<string>();

    ngOnChanges(changes: SimpleChanges): void {
        for (let propName in changes) {
          let change = changes[propName];

          let curVal = JSON.stringify(change.currentValue);
          let prevVal = JSON.stringify(change.previousValue);
          let changeLog = `${propName}: currentValue = ${curVal}, previousValue = ${prevVal}`;
          console.log(changeLog);
        }
        //this.voted.emit(changes);
      }

      onValueChanged(value: string) {
        console.log(value);
      }

Answer 1

您可以在键入事件中发出值。在您的子组件模板中

<textarea #inputField (keyup)="onValueChanged(inputField.value)" [@slideInOut]="textAreaOpen"
      [ngClass]="{'tweet-box-shadow': true, 'hidden': this.openTextArea === false ? 'hidden' : ''}"
      aria-hidden="true" autofocus></textarea>

在您的child-component.ts中

@Output() someProp = new EventEmitter();

  onValueChanged(e) {
   // console.log(e)
   this.someProp.emit(e);
  }

父组件模板

<child-component (someProp)="displayValue($event)"></child-component>

Parent-component.ts

displayValue(val) {
  console.log(val);
}

在TypeScript中交流子视图和主视图

1 个答案: