在父组件的按钮单击期间,我使用下面的代码访问父组件中的子组件HTML元素值。
Child 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
}
Parent 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
}
}
Plunker: - here
但是我无法在SaveCustomerDetails函数中获取子组件的HTML元素值。如何使用ViewChild方法在父组件中输入值?
答案 0 :(得分:3)
如果您的组件具有真正的父/子关系(一个嵌套在另一个中),那么您可以使用属性上的@Input和@Output装饰器在两个组件之间进行通信。
我在这里有一篇博文:https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/
以下是带有@Input和@Output装饰器的子组件的示例:
@Injectable()
export class ChildDataService {
title: string;
name: string;
}
您可以在此处找到完整示例:https://github.com/DeborahK/Angular-GettingStarted
在任何其他情况下,您可以构建服务以在组件之间进行通信,如下所示:
{{1}}
有关详细信息,请参阅此plunker:https://plnkr.co/edit/iODMVQzYwXcf5qJRR1El?p=preview
答案 1 :(得分:3)
并不是说我在这里提倡使用@ViewChild(它是一个紧密耦合的解决方案),但是如果你想在不使用@Output属性的情况下这样做,那就有可能:
@Component({
selector: 'child-component',
template: `<input (change)='title=$event.target.value'>
<input (change)='name=$event.target.value'>`
})
export class ChildComponent {
title = "";
name = "";
}
@Component({
selector: 'parent-component',
template: `<child-component #child></child-component><button type="submit" (click)="SaveCustomerDetails()">Submit</button>`,
})
export class ParentComponent {
@ViewChild('child') myChild: ChildComponent;
SaveCustomerDetails(){
console.log(this.myChild.title + "" + this.myChild.name);
}
}
}
我在这里修改了你的plunker:https://plnkr.co/edit/mCGcIW1AVX2e9gEBzeC0?p=preview