为什么我从子组件的输入中获取空字符串？

Question

我有一个父组件和一个子组件。在父母中，我有一个标签和一个按钮。在孩子，只有一个输入。当我尝试从父级访问子组件的输入时，即使它被填充，它也会返回一个空字符串。

我的父组件：

import {Component, ViewChild} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {TabContent} from './tab-content.component';

@Component({
  selector: 'material-app',
  template: `
     <md-tab-group>
        <md-tab label="One">
           <tab-content></tab-content>
        </md-tab>
        <md-tab label="Two">
           <tab-content></tab-content>
        </md-tab>
     </md-tab-group>

     <button md-raised-button color="primary" (click)="getData()">GET DATA</button>

     <p>Data: {{ inputData }}</p>
     `
})
export class AppComponent {

  private inputData;

  @ViewChild(TabContent) content: TabContent;

  constructor() {
  }

  getData() {
    this.inputData = this.content.state.nativeElement.value; // Returns ''
  }

}

我的孩子成分：

import {Component, ViewChild} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

@Component({
  selector: 'tab-content',
  template: `
    <md-input-container width="100%">
      <input #state mdInput placeholder="State">
    </md-input-container>
  `
})
export class TabContent {

  @ViewChild('state') state;

  constructor() {
  }

}

Plunker Link