简单组件可以直接建立在根组件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属性绑定到HeroDetailComponent的hero属性上。 这种绑定是这样的：

<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';