如何在angular2的父组件中访问子组件HTML元素值? [英] How to access Child Component HTML Element values in Parent Component in angular2?
问题描述
在父组件的按钮单击期间,我已使用以下代码访问父组件中的子组件HTML元素值.
I have used below code to access child component HTML element values in parent component during parent component's button click.
子Component.ts:-
@Component({
selector: 'child-component',
template: `<md-input-container><label>Title</label><input [(ngModel)]="Title" #Title></md-input-container><md-input-container><label>Name</label><input [(ngModel)]="name" #Name></md-input-container><md-input-container class="md-block" flex-gt-sm><label>State</label><md-select [(ngModel)]="user.state" #State><md-option *ngFor="let state in states" value="{{state.abbrev}}">{{state.abbrev}}</md-option></md-select></md-input-container>`
})
export class ChildComponent {
// some code here
}
父项Component.ts:-
import {
Directive,
EventEmitter,
Output,
OnInit,
ElementRef
} from '@angular/core';
@Component({
selector: 'parent-component',
template: `<child-component></child-component><button class="md-button md-ink-ripple" type="submit" (click)="SaveCustomerDetails()"><span class="ng-scope">Submit</span></button>`
})
export class ParentComponent {
@ViewChild('Title') title:ElementRef;
@ViewChild('State') state:ElementRef;
Title: string;
State: string;
SaveCustomerDetails() {
this.Title = this.title.nativeElement.value; // undefined
this.State= this.state.nativeElement.innerHTML; // undefined
}
}
柱塞:-: https://plnkr.co/edit/r3237ta1XzhM2PX09pMl?p =预览
但是我无法在SaveCustomerDetails函数中获取子组件的HTML元素值.如何使用ViewChild方法获取父组件中的输入值?
But I couldn't able get child component's HTML element values inside SaveCustomerDetails function. How to get entered values in parent component using ViewChild method?
推荐答案
如果您的组件具有真正的父/子关系(一个嵌套在另一个中),则可以在属性上使用@Input和@Output装饰器进行通信在两个组件之间.
If your components have a true parent/child relationship (one is nested within the other) then you can use the @Input and @Output decorators on properties to communicate between the two components.
I have a blog post about this here: https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/
以下是带有@Input和@Output装饰器的子组件的示例:
Here is an example of a child component with @Input and @Output decorators:
import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'pm-star',
templateUrl: './star.component.html',
styleUrls: ['./star.component.css']
})
export class StarComponent implements OnChanges {
@Input() rating: number;
starWidth: number;
@Output() ratingClicked: EventEmitter<string> =
new EventEmitter<string>();
ngOnChanges(): void {
this.starWidth = this.rating * 86 / 5;
}
onClick(): void {
this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
}
}
您可以在此处找到完整的示例: https://github.com/DeborahK/Angular-GettingStarted
You can find the complete example here: https://github.com/DeborahK/Angular-GettingStarted
在任何其他情况下,您都可以构建服务以在组件之间进行通信,如下所示:
In any other scenario, you can build a service to communicate between your components, like this:
@Injectable()
export class ChildDataService {
title: string;
name: string;
}
有关更多信息,请参见此插件: https://plnkr.co/edit/iODMVQzYwXcf5qJRR1El? p =预览
See this plunker for more information: https://plnkr.co/edit/iODMVQzYwXcf5qJRR1El?p=preview
这篇关于如何在angular2的父组件中访问子组件HTML元素值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!