[英]Angular2: Get selected option in select component
I am using angular 2.0.0-rc.4. 我正在使用角度2.0.0-rc.4。
I have a form (parent component), and I have in it some drop-down lists from other components, each dropdown has ts
and html template
else where, each one get its data from its component. 我有一个表单(父组件),我有一些来自其他组件的下拉列表,每个下拉列表都有ts
和html template
,其中每个都从其组件中获取数据。 When submitting the form I need the selected value of each one. 提交表单时,我需要每个表格的选定值。 How can I access it from the parent ? 如何从父母那里访问它?
-Parent Form HTML: - 表单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>
-Parent ts
: -Parent 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 ?
}
}
-Drop down component HTML: -Drop down组件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>
-Drop down ts
: - 下降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)
}
}
All other dropdown component have the same structure as the one above. 所有其他下拉组件具有与上述相同的结构。
使用evenEmitter将值从父组件传递给子组件
So after playing around and reading some useful topics: 所以在玩完并阅读一些有用的主题之后:
To passe data from parent to nested component, we need to use @Input
decorator: 要将数据从父级传递到嵌套组件,我们需要使用@Input
装饰器:
@Component({
selector: 'child',
template: 'child.component.html'
})
export class ChildComponent {
@Input() title:string;
}
Now we can pass data to that property from the parent. 现在我们可以从父级传递数据到该属性。
@Component({
selector: 'parent',
template: 'parent.component.html',
directives: [ChildComponent]
})
export class ParentComponent {
childTitle:string = 'Information passed to child';
}
And of course: 而且当然:
/* parent.component.html */
<div>
<h1>Parent component</h1>
<child[title]='childTitle'></child>
</div>
Without the @input
decorator the child component wont know about the passed data from the parent. 如果没有@input
装饰器,子组件将不会知道来自父级的传递数据。
And to pass data from Child to Parent we need to use eventEmitter. 要将数据从Child传递给Parent,我们需要使用eventEmitter。 You can read more here . 你可以在这里阅读更多 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.