Angular 为什么我'；m从子组件'；谁的输入？

我有一个父组件和一个子组件。在parent中，我有一个选项卡和一个按钮。在child中，只有一个输入。当我试图从父组件访问子组件的输入时，它返回一个空字符串，即使它已填充

我的父组件：

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() {
  }

}

从'@angular/core'导入{Component，ViewChild}；
从“@angular/platform browser dynamic”导入{bootstrap}；
从“./tab content.component”导入{TabContent}；
@组成部分({
选择器：“材质应用程序”，
模板：`
获取数据
数据：{{inputData}}

`
})
导出类AppComponent{
私人输入数据；
@ViewChild（TabContent）内容：TabContent；
构造函数（）{
}
getData（）{
this.inputData=this.content.state.nativeElement.value；//返回“”
}
}

我的孩子组件：

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() {
  }

}

从'@angular/core'导入{Component，ViewChild}；
从“@angular/platform browser dynamic”导入{bootstrap}；
@组成部分({
选择器：“选项卡内容”，
模板：`
`
})
导出类选项卡内容{
@ViewChild（“状态”）状态；
构造函数（）{
}
}

---

我不确定为什么值字段不能反映输入中的实际内容，但使用表单模块有什么问题？这就是你真正应该做的。因为我还在学习Angular，而我的课程还没有进入公式部分。你得到空字符串的原因是因为你有两个选项卡共享同一个子组件，所以Angular不知道该读取哪个输入。我强烈建议您将您的子模板包装在一个表单标记中，然后使用“name”来区分输入。您从父级收到一个唯一的名称，例如

tab.nbr

，您将在输入中使用该名称，如

name=“{{tab.nbr}”

以下答案基于

*ngFor

，但问题是相同的，以区分输入，因此这可能会对您有所帮助：此外，您正在使用viewchild，但另一种选择是使用

@Output（）

。也许viewchild更适合你。我不知道为什么value字段不能反映输入中的实际内容，但是使用Forms模块有什么错呢？这就是你真正应该做的。因为我还在学习Angular，而我的课程还没有进入公式部分。你得到空字符串的原因是因为你有两个选项卡共享同一个子组件，所以Angular不知道该读取哪个输入。我强烈建议您将您的子模板包装在一个表单标记中，然后使用“name”来区分输入。您从父级收到一个唯一的名称，例如

tab.nbr

，您将在输入中使用该名称，如

name=“{{tab.nbr}”

以下答案基于

*ngFor

，但问题是相同的，以区分输入，因此这可能会对您有所帮助：此外，您正在使用viewchild，但另一种选择是使用

@Output（）

。也许viewchild更适合你。但我要说的是：