1.4 第一个组件
现在，为我们的App增加一个Component吧，在命令行窗口输入 ng generate component login --inline-template --inline-style 。 顾名思义，参数generate是用来生成文件的，参数component是说明我们要生成一个组件，login是我们的组件名称，你可以自己想个其他有意思的名字。后面的两个参数是告诉angular-cli：生成组件时，请把组件的HTML模板和CSS样式和组件放在同一个文件中（其实分开文件更清晰，但第一个例子我们还是采用inline方式了）：
wangpengdeMacBook-Pro:blog wangpeng$ ng generate component login --inline-template --inline-style
installing component
create src/app/login/login.component.spec.ts
create src/app/login/login.component.ts
wangpengdeMacBook-Pro:blog wangpeng$?
是不是感觉这个命令行太长了？幸运的是Angular团队也这么想，所以你可以把上面的命令改写成 ng g c login -it -is ，也就是说可以用generate的首字母g来代替generate，用component的首字母c来代替component，类似的--inline-template的两个词分别取首字母变成-it。
angular-cli为我们在login目录下生成了两个文件，其中 login.component.spec.ts 是测试文件，我们这里暂时不提。另一个login.component.ts 就是我们新建的Component了。
Angular提倡的文件命名方式是这样的：组件名称.component.ts ，组件的HTML模板命名为：组件名称.component.html，组件的样式文件命名为： 组件名称.component.css。建议读者在编码中尽量遵循Google的官方建议。
我们新生成的Login组件源码如下：
import { Component, OnInit } from '@angular/core';
//@Component是Angular提供的装饰器函数，用来描述Compoent的元数据
//其中selector是指这个组件的在HTML模板中的标签是什么
//template是嵌入（inline）的HTML模板，如果使用单独文件可用templateUrl
//styles是嵌入（inline）的CSS样式，如果使用单独文件可用styleUrls
@Component({
selector: 'app-login',
template: '
<p>
login Works!
</p>
',
styles: []
})
export class LoginComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
这个组件建成后我们怎么使用呢？注意上面的代码中@Component修饰配置中的 selector: ‘app-login’，这意味着我们可以在其他组件的template中使用 <app-login></app-login> 来引用我们的这个组件。
现在我们打开 src/app/app.component.html 加入我们的组件引用：
<h1>
{{title}}
</h1>
<app-login></app-login>
保存后返回浏览器，可以看到我们的第一个组件也显示出来了，如图 1.5所示。
图1.5 第一个组件的显示