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 第一个组件的显示