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

Angular组件传参 Input 是属性装饰器，用来定义组件内的输入属性。在实际应用场合，我们主要用来实现父组件向子组件传递数据。Angular 应用是由各式各样的组件组成，当应用启动时，Angular 会从根组件开始启动，并解析整棵组件树，数据由上而下流下下一级子组件。
Angular 组件通信 上一篇，我们讲了 Angular 结合 NG-ZORRO 快速开发。前端开发，很大程度上是组件化开发，永远离不开组件之间的通信。那么，在 Angular 开发中，其组件之间的通信是怎么样的呢？