angular - 两种方式传递数据

Question

我有 2 个组件:AppComponent 和 ChildComponent。ChildComponent 是 AppComponent 的子组件。如何将更改后的“variable1”从 ChildComponent 发送回 AppComponent？

应用组件 [html]:

<child [variable1]="variable1">PARENT</child>

应用组件[ts]:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  variable1: string = 'abc';
}

子组件 [ts]:

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

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input('variable1') variable1: string;

  ngOnInit() {
    this.variable1 = this.variable1 + 'def';
  }
}

Answer 1

您可以使用 EventEmitter 和 @Output 并在您的子标记中标记双向绑定(bind)来执行此操作。所以你的子标签添加双向绑定(bind):

<child [(variable1)]="variable1">PARENT</child>

在你的 child 中用变量名和后缀Change标记这个事件发射器(对于双向绑定(bind)工作很重要!)

@Input() variable1: string;
@Output() variable1Change = new EventEmitter<string>()

每当您想将变量更改传递给父级时，在子级中执行:

this.variable1Change.emit('my new value')

作为旁注，请注意我从您的 @Input 中删除了别名，这是基于文档样式指南:https://angular.io/guide/styleguide#avoid-aliasing-inputs-and-outputs