两种方式传递数据

Question

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

AppComponent [html]:

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

AppComponent [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 并在 child 标签中标记 two-way-binding 来完成此操作。所以你的 child 标签添加 two-way-binding:

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

在您的 child 中用变量名称和后缀 Change 标记此事件发射器（对于 two-way-binding 的工作很重要！）

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

并且每当您想将变量更改传递给 parent 时，在 child 中执行：

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

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

Answer 2

我可能来晚了一点，但还有更简单的方法：使用 viewChildren：

父组件 TS：

@ViewChild('child') child: ChildComponent;
// ...
this.myVariable = this.child.variable1;

父组件 HTML :

<child #child>PARENT</child>

子组件 TS：

variable1 = '';
// ... 
this.variable1 = 'Hello world';

Answer 3

下面的例子既有父子互动，也有子父互动。 you can also try here

app.component.ts - 父组件

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  //passing values from parent to child
  master = "child";

  //Getting value from child
  childToParent(name){
    this.master=name;
  }

}

app.component.html - HTML 父组件

<div>
  <span>Master to Child </span><input type="textbox" [(ngModel)]='master'>
</div>

<app-child [master]=master (childToParent)="childToParent($event)"></app-child>

app-child.component.ts - 子组件

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



@Component({
  selector: 'app-child',
  template: `
    <input type="textbox" [(ngModel)]='masterName'>
    <button (click)="sendToParent(masterName)" >sendToParent</button>
  `
})
export class AppChildComponent {
  //getting value from parent to child
  @Input('master') masterName: string;

  @Output() childToParent = new EventEmitter<String>();

  sendToParent(name){
    this.childToParent.emit(name);
  }
}

两种方式传递数据

Two way passing data

typescript

angularjs-decorator

angular