Angular2：在选择组件中获取选定的选项答案

【问题标题】：Angular2: Get selected option in select componentAngular2：在选择组件中获取选定的选项
【发布时间】：2016-07-28 09:10:42
【问题描述】：

我正在使用角度 2.0.0-rc.4。

我有一个表单（父组件），其中有一些来自其他组件的下拉列表，每个下拉列表都有 ts 和 html template 否则，每个下拉列表都从其组件中获取数据。提交表单时，我需要每个表单的选定值。如何从父级访问它？

-父表单 HTML：

<form class="" (submit)="submitNewModel($event, label.value)">
    <div class="form-group">
      <label for="label" class="control-label"> Label </label>
      <input type="text" name="label" #label class="form-control" placeholder="Model's label">
    </div>
    <styles-dropdown></styles-dropdown>
    <colors-dropdown></colors-dropdown>
    <modes-dropdown></modes-dropdown>
    <shapes-dropdown></shapes-dropdown>
    <button type="submit" name="button">Create new model</button>
</form>

-家长ts:

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

...

@Component({
  selector: 'models',
  templateUrl: 'app/models/models.component.html',
  directives: [
    StylesDropDownComponent,
    ...
  ]
})
export class ModelsComponent {

  constructor(){
  }

  submitNewModel(event, label) {
    event.preventDefault();
    console.log('Value label', label);
    console.log(event);
    //How do I get selected values here ?
  }
}

-下拉组件HTML：

<div class="portlet-body">
  <div class="form-group">
    <label for="styles" class="control-label"> Style </label>
    <select name="style-select" id="styles" class="form-control select2">
      <option value="">Select style</option>
      <option *ngFor="let style of styles" value="{{style.id}}">{{ style.label }}</option>
    </select>
  </div>

-下拉ts:

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

import { ClientHttp } from '../../common/cigma-http';
import { StylesComponent } from '../styles.component';

@Component({
  selector: 'styles-dropdown',
  templateUrl: 'app/styles/styles-dropdown/styles.dropdown.component.html',
})
export class StylesDropDownComponent extends StylesComponent  {
  constructor(protected cigmaHttp: CigmaHttp) {
    super(cigmaHttp)
  }
}

所有其他下拉组件的结构与上述相同。

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

使用 evenEmitter 将值从父组件传递给子组件

【讨论】：

【解决方案2】：

所以在玩耍并阅读了一些有用的主题之后：

要将数据从父组件传递到嵌套组件，我们需要使用@Input 装饰器：

@Component({
  selector: 'child',
  template: 'child.component.html'
})
export class ChildComponent {  
  @Input() title:string;
}

现在我们可以将数据从父级传递给该属性。

@Component({
  selector: 'parent',
  template: 'parent.component.html',
  directives: [ChildComponent]
})
export class ParentComponent {  
  childTitle:string = 'Information passed to child';
}

当然还有：

/* parent.component.html */
<div>  
  <h1>Parent component</h1>
  <child[title]='childTitle'></child>
</div>

如果没有 @input 装饰器，子组件不会知道从父组件传递的数据。

为了将数据从 Child 传递给 Parent，我们需要使用 eventEmitter。你可以read more here。

【讨论】：