将两个变量从父组件传递到子组件

Question

我正在尝试将两个变量从子组件发送到父组件

我已将子选择器放置到父组件视图，在这里我使用子标记并将@output 名称 myOutput 绑定到父组件中的 getData 函数并将事件处理程序传递给它

<app-form-test [myInput]='myInputString' (myOutput)="getData($event)"></app-form-test>

父 ts 文件 =>

  getData(value) {
    alert(value);
  }

子 ts 文件

export class FormTestComponent implements OnInit {
  @Input() myInput: [];

  @Output() myOutput: EventEmitter<string> = new EventEmitter();
  firstOutputString = 'hello I am coming from child component'
  secondOutputString = " I am second string";

  ngOnInit() {

  }
  SendData() {
    this.myOutput.emit(this.firstOutputString);
  }
 }

在这里，我想将另一个变量 secondOutputString 从子组件传递给父组件，我尝试使用

SendData() {
        this.myOutput.emit(this.firstOutputString , this.secondOutputString);
      }

但是我遇到了错误

Answer 1

在子 .ts 中：

@Output() myOutput: EventEmitter<{firstOutputString: string, secondOutputString: string}> = new EventEmitter();

SendData() {
    this.myOutput.emit({
      firstOutputString: this.firstOutputString,
      secondOutputString: this.secondOutputString
    });
}

在父 .ts 中：

getData(value) {
    console.log(value.firstOutputString);
    console.log(value.secondOutputString);
}