Angular2：父子组件通信

Posted 2023-02-22

【中文标题】Angular2：父子组件通信

【英文标题】：Angular2: Parent and Child Components Communication

【发布时间】：2016-07-18 22:22:57

【问题描述】：

我正在尝试创建一个父子组件，其中子组件将有一个状态下拉列表。有人可以帮助我了解如何访问父组件中的状态下拉值吗？这是我的示例代码。

/app/app.ts

import Component from 'angular2/core'
import FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators from 'angular2/common'
import State from './state'

@Component(
  selector: 'my-app',
  providers: [FormBuilder],
  templateUrl: 'app/app.html',
  directives: [State]
)

export class App 
  registrationForm: ControlGroup;

  state: State;

  constructor(fb: FormBuilder) 

    this.registrationForm = fb.group(
      'name': ['', Validators.required],
      'email': ''
    );
  

  onSubmit() 
    alert('Entered Name: ' + this.registrationForm.value.name);
    alert('State Selected: '); //trying to alert the state selected in state component
  


/app/app.html

<div>
  <h2>Registration Form</h2>
  <form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()">
    <label>Name: </label>
    <input type="text" ngControl="name">
    <state></state>
    <button [disabled]="!registrationForm.valid">Submit</button>
  </form>
</div>

/app/state.ts
import Component from 'angular2/core'
import FORM_DIRECTIVES, FormBuilder, ControlGroup from 'angular2/common'

@Component(
  selector: 'state',
  providers: [FormBuilder],
  templateUrl: 'app/state.html',
  directives: []
)

export class State 

  statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];

  stateForm: ControlGroup

  constructor(fb: FormBuilder) 
    this.stateForm = fb.group(
      'state': ''
    );

  

  setStateValue() 
    alert('State Selected: ' + this.stateForm.value.state);
  


/app/state.html
<div>
  <form [ngFormModel]="stateForm">
    <label>State: </label>
    <select ngControl="state" (change)="setStateValue()">
      <option *ngFor="#s of statesDropDownValues"
          [value]="s">s
      </option>
    </select>
  </form>
</div>

也请戳这里http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info

【问题讨论】：

对于孩子 -> 家长交流见angular.io/docs/ts/latest/cookbook/…

完美。感谢您分享此链接。我已经了解了父子通信的工作原理。

【参考方案1】：

我会在您的State 组件中定义一个输出并使用它触发一个事件：

@Component(
  selector: 'state',
  providers: [FormBuilder],
  templateUrl: 'app/state.html',
  directives: []
)
export class State 
  statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];
  stateForm: ControlGroup;
  @Output()
  stateChange:EventEmitter<string> = new EventEmitter(); // <----

  constructor(fb: FormBuilder) 
    this.stateForm = fb.group(
      'state': ''
    );
  

  setStateValue() 
    alert('State Selected: ' + this.stateForm.value.state);
    stateChange.emit(this.stateForm.value.state);
  

父组件可以注册此事件以收到更改通知：

<div>
  <h2>Registration Form</h2>
  <form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()">
    <label>Name: </label>
    <input type="text" ngControl="name">
    <state (stateChange)="handleNewState($event)"></state>
    <button [disabled]="!registrationForm.valid">Submit</button>
  </form>
</div>

$event 包含新状态值的值。

编辑

下面是在父组件中保存选中状态的方法：

export class App 
  registrationForm: ControlGroup;

  state: string;

  constructor(fb: FormBuilder) 
    this.registrationForm = fb.group(
      'name': ['', Validators.required],
      'email': ''
    );
  

  handleNewState(state) 
    this.state = state;
  

  onSubmit() 
    alert('Entered Name: ' + this.registrationForm.value.name);
    alert('State Selected: ' + this.state);
  

【讨论】：

谢谢。这绝对是有帮助的。但是如何获取在我的 onSubmit() 函数中选择的状态的值？

你也可以使用'@ContentChild'或'@ViewChild'来访问child的属性

【参考方案2】：

使用output 和emit，您可以轻松访问父组件中的子数据。例如

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

@Component(
  selector: 'child-component',
  template: '<div>'
      +'<span>Child Component: </span>'
      +'<span>name</span>'
      +'<button (click)="shareData()">Share data to parent</button>'
    +'</div>',
  styleUrls: ['./app.component.css']
)
export class ChildComponent 
 
 @Input() name: string;
 @Output() shareDataToParent = new EventEmitter();
 
 title : string;
 constructor()
     this.title = 'Sharing from child to parent';
 
 
 shareData()
     this.shareDataToParent.emit(this.title);
 


<child-component name="Angular" (shareDataToParent) = shareDataToParent($event)>
</child-component>

父组件

shareDataToParent(sharedText:string)
  console.log(sharedText);