Angular2:父子组件通信 [英] Angular2: Parent and Child Components Communication

问题描述

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

/app/app.ts从 'angular2/core' 导入 {Component}从angular2/common"导入 {FORM_DIRECTIVES、FormBuilder、ControlGroup、Validators}从 './state' 导入 {State}@成分({选择器:'我的应用'，提供者:[FormBuilder]，templateUrl: 'app/app.html',指令:[状态]})出口类应用{注册表:ControlGroup；状态:状态；构造函数(FB:FormBuilder){this.registrationForm = fb.group({'name': ['', Validators.required],'电子邮件': ''});}提交(){alert('输入名称:' + this.registrationForm.value.name);alert('状态选择:');//试图提醒状态组件中选择的状态}}/app/app.html<div><h2>注册表</h2><form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()"><标签>名称:</label><input type="text" ngControl="name"><状态></状态><button [disabled]="!registrationForm.valid">提交</button></表单>

/app/state.ts从 'angular2/core' 导入 {Component}从angular2/common"导入 {FORM_DIRECTIVES, FormBuilder, ControlGroup}@成分({选择器:'状态'，提供者:[FormBuilder]，templateUrl: 'app/state.html',指令:[]})出口类状态{statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];状态形式:控制组构造函数(FB:FormBuilder){this.stateForm = fb.group({'状态': ''});}设置状态值(){警报('状态选择:' + this.stateForm.value.state);}}/app/state.html<div><form [ngFormModel]="stateForm"><label>状态:</label><select ngControl="state" (change)="setStateValue()"><option *ngFor="#s of statesDropDownValues"[value]="s">{{s}}</选项></选择></表单>

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

解决方案

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

@Component({选择器:'状态'，提供者:[FormBuilder]，templateUrl: 'app/state.html',指令:[]})出口类状态{statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];stateForm:控制组；@输出()stateChange:EventEmitter= new EventEmitter();//<----构造函数(FB:FormBuilder){this.stateForm = fb.group({'状态': ''});}设置状态值(){警报('状态选择:' + this.stateForm.value.state);stateChange.emit(this.stateForm.value.state);}}

父组件可以在此事件上注册以收到更改通知:

<h2>注册表</h2><form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()"><标签>名称:</label><input type="text" ngControl="name"><state(stateChange)="handleNewState($event)"></state><button [disabled]="!registrationForm.valid">提交</button></表单>

$event 包含新状态值的值.

编辑

这里有一种在父组件中保存选中状态的方法:

导出类 App {注册表:ControlGroup；状态:字符串；构造函数(FB:FormBuilder){this.registrationForm = fb.group({'name': ['', Validators.required],'电子邮件': ''});}处理新状态(状态){this.state = 状态；}提交(){alert('输入名称:' + this.registrationForm.value.name);alert('选择的状态:' + this.state);}}

I'm trying to create a parent and child component where the child component is going to have a states drop down. Can someone help me understand how I can access the states drop down value in Parent Component? Here is my sample code.

/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>

Also plunker here http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info

解决方案

I would define an output into your State component and triggers an event using it:

@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);
  }
}

The parent component can register on this event to be notified of changes:

<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 contains the value of the new state value.

Edit

Here is a way to save the selected state in the parent component:

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);
  }
}

这篇关于Angular2:父子组件通信的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！