如何访问angular2中父组件中的子组件HTML元素值？

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

子组件。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
}

@组件({
选择器：'子组件'，
模板：`TitleNameState{{state.abbrev}}`
})
导出类子组件{
//这里有一些代码
}

父组件。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
   }
}

导入{
指令，
事件发射器，
产出，
奥尼特，
ElementRef
}从“@angular/core”开始；
@组成部分({
选择器：“父组件”，
模板：`提交`
})
导出类ParentComponent{
@ViewChild（“标题”）标题：ElementRef；
@ViewChild（“状态”）状态：ElementRef；
标题：字符串；
状态：字符串；
SaveCustomerDetails（）{
this.Title=this.Title.nativeElement.value；//未定义
this.State=this.State.nativeElement.innerHTML；//未定义
}
}

Plunker:-

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

---

但我无法在SaveCustomerDetails函数中获取子组件的HTML元素值。如何使用ViewChild方法在父组件中获取输入的值？

如果组件具有真正的父/子关系（一个嵌套在另一个中），则可以使用属性上的@Input和@Output装饰符在两个组件之间进行通信

我在这里有一篇关于这方面的博文：

下面是带有@Input和@Output装饰符的子组件示例：

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

---

有关更多信息，请参阅此plunker:

我不是在这里提倡使用@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);
  }
}
}

@组件({
选择器：'子组件'，
模板：`
`
})
导出类子组件{
title=“”；
name=“”；
}
@组成部分({
选择器：“父组件”，
模板：`Submit`，
})
导出类ParentComponent{
@ViewChild（“child”）myChild:ChildComponent；
SaveCustomerDetails（）{
console.log（this.myChild.title+“”+this.myChild.name）；
}
}
}

---

我在这里修改了您的plunker:

您已经使用EventEmitter在子组件中共享了click事件示例。在我的示例中，单击事件在父组件中可用。我想在父组件的按钮单击上捕获子组件的HTML元素值。我也看了你的多视力课程。如果可能，将plunker中的示例与我的需求分享。如果您想构建一个plunker来演示您的问题，我可以看一看。我已经在plunker工具中添加了我的代码。看一看。那我推荐一种服务。我在这里更新了您的plunker:@Maximus:-）我会查看出版物。谢谢哪一种是实现的最佳实践，即输出或ViewChild。如果可能，请与输出属性共享代码，因为我是Angular2的新手。使用输出属性更好。在这段视频中，我解释了如何编写松散耦合的组件，我在其中一个组件中使用了输出：谢谢。我会看那个视频。