typescript 从子组件到父组件的事件发射器

Posted 2021-05-20

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {

  enteredVariable = '';
  @Output() childVariableEmitter = new EventEmitter<string>();
  
  onAddVariable() {
    this.childVariableEmitter.emit(this.enteredVariable);
  }
}

<input type="text" name="variable" [(ngModel)]='enteredVariable'>

<app-child (childVariableEmitter)="getVariable($event)"></app-child>

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss']
})
export class ParentComponent {
  parentVariable = '';

  getVariable(variableFromChild) {
    this.parentVariable = variableFromChild;
  }
}