Angular 2将数据父项传递给子组件 [英] Angular 2 pass data parent to child component

问题描述

我有两个组件叫做app.component和child.component。我想将数据从父母传递给孩子。我的代码如下。

app.component.ts

 从'./child.component'导入{ChildComponent}; 
从'@ angular / core'导入{Component}; 
 $ b @Component（{
选择器：'app-root'，
 templateUrl：'./app.component.html'，
 styleUrls：['./ app.component.css']，
 entryComponents：[ChildComponent] 
}）
导出类AppComponent {
 title ='app works！'; 
} 
  

child.component.ts

 从'./app.component'导入{AppComponent}; 
从'@ angular / core'导入{Component，Input}; 
 
 @Component（{
 selector：'child'，
 templateUrl：'./child.component.html'
}）
 export class ChildComponent {
 @Input（）input：string; 
 
} 
  

app.component.html

 < h1> 
 {{title}} 
< / h1> 
 
< child [input] =parent to child> < /儿童> 
  

child.component.html

 < DIV> {{输入}}< / DIV> 
  

app.module.ts

<$ p $从'./child.component'导入{ChildComponent};
从'@ angular / platform-b​​rowser'导入{BrowserModule};
从'@ angular / core'导入{NgModule};
从'@ angular / forms'导入{FormsModule};
从'@ angular / http'导入{HttpModule};

从'./app.component'导入{AppComponent};
$ b @NgModule（{
声明：[
AppComponent，
ChildComponent
]，
进口：[
BrowserModule，
FormsModule，
HttpModule
]，
providers：[]，
bootstrap：[AppComponent]
}）
导出类AppModule {}

解决方案

如果您编写 [input] =parent to child到模板中，那么它意味着你将父元件 this.parent引用到不存在的子元素中。

你可以这样做：

  @Component（ {
 selector：'app-root'，
 templateUrl：'./app.component.html'，
 styleUrls：['./app.component.css']，
 entryComponents：[ChildComponent] 
}）
 export class AppComponent {
 title ='app works！'; 
 parentInput ='parent to child'; 
} 
  

然后在模板中：

 < h1> 
 {{title}} 
< / h1> 
 
< child [input] =parentInput> < /儿童> 
  

来源： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to -child

I have two components its called app.component and child.component. I want to pass the data from parent to child. My code is below. Where am i making mistake?

app.component.ts

import { ChildComponent } from './child.component';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[ChildComponent]
})
export class AppComponent {
  title = 'app works!';
}

child.component.ts

    import { AppComponent } from './app.component';
    import { Component, Input } from '@angular/core';

    @Component({
      selector: 'child',
      templateUrl: './child.component.html'
    })
    export class ChildComponent {
     @Input() input :string;

}

app.component.html

<h1>
  {{title}}
</h1>

<child [input]="parent to child"> </child>

child.component.html

<div>{{input}}</div>

app.module.ts

import { ChildComponent } from './child.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

解决方案

If you write [input]="parent to child" to the template then it means that you are refering to the parent components this.parent to child which doesn't exists.

You can do something like this:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[ChildComponent]
})
export class AppComponent {
  title = 'app works!';
  parentInput = 'parent to child';
}

then in the template:

<h1>
  {{title}}
</h1>

<child [input]="parentInput"> </child>

Source: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

这篇关于Angular 2将数据父项传递给子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！