如何在angular2的父组件中访问子组件HTML元素值? [英] How to access Child Component HTML Element values in Parent Component in angular2?

问题描述

我使用以下代码在父组件的按钮单击期间访问父组件中的子组件 HTML 元素值.

子组件.ts:-

@Component({选择器:'子组件'，模板:`<md-input-container><label>Title</label><input [(ngModel)]="Title" #Title></md-input-container><md-input-容器><label>名称</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>`})导出类 ChildComponent {//这里有一些代码}

父组件.ts:-

import {指示，事件发射器，输出，初始化，元素引用来自'@angular/core';@成分({选择器:'父组件'，模板:`<child-component></child-component><button class="md-button md-ink-ripple" type="submit" (click)="SaveCustomerDetails()"><spanclass="ng-scope">提交</span></button>`})导出类父组件{@ViewChild('Title') title:ElementRef;@ViewChild('State') state:ElementRef;标题:字符串；状态:字符串；保存客户详细信息(){this.Title = this.title.nativeElement.value;//不明确的this.State= this.state.nativeElement.innerHTML;//不明确的}}

Plunker:-

以下是带有@Input 和@Output 装饰器的子组件的示例:

import { Component, OnChanges, Input, EventEmitter, Output } from '@angular/core';@成分({选择器:'pm-star'，templateUrl: './star.component.html',styleUrls: ['./star.component.css']})导出类 StarComponent 实现 OnChanges {@Input() 评分:数字；星宽:数字；@Output() ratingClicked: EventEmitter=new EventEmitter();ngOnChanges(): 无效 {this.starWidth = this.rating * 86/5;}onClick(): 无效 {this.ratingClicked.emit(`评级 ${this.rating} 被点击了！`);}}

您可以在此处找到完整示例:https://github.com/DeborahK/Angular-GettingStarted

在任何其他场景中，您都可以构建一个服务来在您的组件之间进行通信，如下所示:

@Injectable()导出类 ChildDataService {标题:字符串；名称:字符串；}

查看此 plunker 了解更多信息:https://plnkr.co/edit/iODMVQzYwXcf5qJRR1El?p=预览

I have used below code to access child component HTML element values in parent component during parent component's button click.

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:- https://plnkr.co/edit/r3237ta1XzhM2PX09pMl?p=preview

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?

解决方案

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/

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

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

See this plunker for more information: https://plnkr.co/edit/iODMVQzYwXcf5qJRR1El?p=preview

这篇关于如何在angular2的父组件中访问子组件HTML元素值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！