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