小道消息：可以修改app.component.ts文件中的@Component下的为selector: 'app-test'。这个时候，网页会显示空白，这个时候，需要修改此文件的上级目录下，即src目录下的index.html的
<body>
<app-test></app-test>
</body>
看到这句话，基本明白是什么意思了。
1.添加一个组件，其实就是添加一个xxx.component.ts的文件而已。然后在此文件中写上：
import { Component } from '@angular/core';
@Component({
selector: 'app-hero-detail',
})
export class HeroDetailComponent {
}
本例是写hero-detail.component.ts文件。在app文件夹下面写的。
(1)要定义一个组件，我们总是要先导入符号Component。
(2)@Component装饰器为组件提供了Angular元数据。 CSS选择器的名字hero-detail会匹配元素的标签名，用于在父组件的模板中标记出当前组件的位置。这个名字可以随便取，不过最好写成app-hero-detail,好像不加app-是编译不过的，不知道为啥。
(3)总是export这个组件类，因为你必然会在别处import它。
这个组件的框架算是完了，但是没有实际的内容。
2.组件添加内容：
修改修饰器：就是让此组件有一个渲染的界面而已，模板
@Component({
selector: 'app-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
</div>
</div>
`
})
修改类，这个是实际绑定的属性和方法等的容器：
export class HeroDetailComponent {
hero: Hero;
}
这样，这个组件算是完成。
3.不过问题来了，在两个组件中都使用Hero类，因此需要提取它。
新建hero.ts文件，将文件修改为Hero类的内容，然后让两个组件包含它即可：
export class Hero {
id: number;
name: string;
}
组件包含类的语句：import { Hero } from './hero';
4.组件之间通讯.
现在点击事件是在app.component组件中，要把数据传到hero-detail.component组件中，那么需要在app.component组件中：
在模板里添加：(注意app-hero-detail字符串，是不是和组件的selector修饰是一致的)
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
父组件AppComponent会告诉子组件HeroDetailComponent要显示哪个， 告诉的方法是把它的selectedHero属性绑定到HeroDetailComponent的hero属性上。
在HeroDetailComponent要将hero属性做成输入性属性才可以，因此需要做：
(1)import { Component, Input } from '@angular/core';改成这样，将Input包含进来。
(2)@Input() hero: Hero;将属性改成此。
5.现在做完，看样子是将主组件和次组件都做完了，并且可以通讯了，但是，界面上啥也没显示，这是为何？
其实，每个组件都必须在一个（且只有一个）Angular模块中声明。
那这个地方就是：app.module.ts文件。以前添加NgModel的时候，修改过此文件的。
现在需要做的是：
(1)import { HeroDetailComponent } from './hero-detail.component';包含此组件。
(2)将组件搞到申明数组里去，和以前那个放到imports里面不一样，这个就应该是自定义和系统定义的区别吧。
declarations: [
AppComponent,
HeroDetailComponent//添加这个
],
题外话：其实从上面，我们隐约可以看出，不过主组件或者从组件，是否都只是组件而已，即相当于一个控件。这个控件，依赖于在src/index.html文件中显示。
其实也可以更换启动组件的，只需要修改src/index.html中body下的标签和app.module.ts下的bootstrap就可以。自己可以试试。
注意，父组件传递给子组件的类，是传递的引用，因为修改子组件的name也会修改父组件的name的，自己可以试试
