Angular2 如何创建子组件?两个组件(同级组件和上下级组件)之间如何传递数据参数?

简单组件可以直接建立在根组件app.component同级目录下。

详细见英雄案例的第四节“多组件”教程。

import { Component } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-detail',
templateUrl: './hero.detail.component.html',
styleUrls: ['./hero.detail.component.css'],
})

export class HeroDetailComponent {

}


父组件如果传递数据到子组件

父组件AppComponent会告诉子组件HeroDetailComponent要显示哪个英雄, 告诉的方法是把它的selectedHero属性绑定到HeroDetailComponenthero属性上。 这种绑定是这样的:

<hero-detail [hero]="selectedHero"></hero-detail>

在等号的左边,是方括号围绕的hero属性,这表示它是属性绑定表达式的目标。 我们要绑定到的目标属性必须是一个输入属性,否则Angular会拒绝绑定,并抛出一个错误。


公用类可以单独提取出来跟组件放在同级目录


hero.ts

//创建一个英雄类
export class Hero{
id: number;
name: string;
}


需要用到组件和类的地方用导入的方法:

import { Hero } from './hero';
import { HeroDetailComponent } from './hero-detail.component';