如何在 angular2 中访问 Child 组件 HTML Parent 组件中的元素值？

Question

我使用下面的代码在 parent 组件的按钮单击期间访问 parent 组件中的 child 组件 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
   }
}

笨蛋：- https://plnkr.co/edit/r3237ta1XzhM2PX09pMl?p=preview

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

Answer 1

如果您的组件具有真正的 parent/child 关系（一个嵌套在另一个中），那么您可以在属性上使用 @Input 和 @Output 装饰器在两个组件之间进行通信。

我在这里有一个博客 post：https://blogs.msmvps.com/deborahk/passing-data-to-and-raising-an-event-from-a-nested-component/

这是一个带有@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!`);
    }
}

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

在任何其他情况下，您可以构建一个服务来在您的组件之间进行通信，如下所示：

@Injectable()
export class ChildDataService {
  title: string;
  name: string;
}

有关更多信息，请参阅此插件：https://plnkr.co/edit/iODMVQzYwXcf5qJRR1El?p=preview

Answer 2

并不是说我在这里提倡使用@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

如何在 angular2 中访问 Child 组件 HTML Parent 组件中的元素值？

How to access Child Component HTML Element values in Parent Component in angular2?

typescript

angular2-template

angular