Angular 2 中的组件（一）

简述

组件是Angular 2 众多好的理念之一。

在Angular apps中，我们使用HTML的标签来编写我们的互动应用。但是浏览器只理解一些标签，像<select>或者<form>等一些浏览器创建者定义的标签。

我们如何让浏览器认识新的标签呢？如果我们想使用<weather>标签来展示天气怎么办？又或者我们想使用<login>标签来创建一个登录面板？我们可以使用Angular的组件，组件可以让浏览器认识我们定制的标签。

创建组件的命令

让我们来创建第一个component，当我们创建好这个component，我们将能够在HTML文档中使用它，如下所示：

<app-hello-world></app-hello-world>

可以使用angular-cli的generate命令创建component，使用下面的命令我们可以创建一个名为hello-world的component，命令如下：

$ ng generate component hello-world

从输出结果可以看出创建了哪些文件，结果如下：

installing component
  create src/app/hello-world/hello-world.component.css
  create src/app/hello-world/hello-world.component.html
  create src/app/hello-world/hello-world.component.spec.ts
  create src/app/hello-world/hello-world.component.ts
  update src/app/app.module.ts

名为hello-world.component.ts的TypeScript文件定义了一个组件。用编辑器打开内容如下：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

一个基本的组件有两部分：

1. 一个组件注释
2. 一个组件定义类

组件TypeScript文件中的内容

如果之前不了解TypeScript语言，则hello-world.component.ts文件中内容看起来可能头大，但是不用担心，下面一步一步的说一下。

导入依赖

hello-world.component.ts文件开始的import语句定义了我们写代码时需要用到的模块。文件中的 import语句从"@anaular/core"模块导入了：Component和OnInit。import语句的格式如下：

import {导入的内容} from 模块

在导入语句中{}的意思是解构，解构是TypeScript和ES6提供的特性，以后的章节会深入的探讨。

Component 注释

导入过依赖之后，我们需要声明组件。hello-world.component.ts文件中下面的代码就是Component注释：

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})

当使用@Component注释在HelloWorldComponent类上时代表声明HelloWorldComponent是一个组件。

注释中的selector: 'app-hello-world'代码可以让我们通过<app-hello-world></app-hello-world>标签来访问到组件。

注释中templateUrl: './hello-world.component.html'代码的意思是：标签<app-hello-world>解析时会使用'./hello-world.component.html'中的代码。可以看一下hello-world.component.html文件的内容：

<p>
  hello-world works!
</p>

声明注释时我们有两种方式定义模板，使用templateUrl或者template。上面注释的声明就是使用的templateUrl，使用template的方式如下：

@Component({
  selector: 'app-hello-world',
  template: `
    <p>
        hello-world works inline!
    </p>`,
  styleUrls: ['./hello-world.component.css']
})

注：定义tmplate的值时需要在将内容放入反引号中,反引号的语法是在ES6中引入的用来支持多行字符串。

至于是用template还是templateUrl，根据单一职责原则，建议使用templateUrl。

注释中styleUrls: ['./hello-world.component.css']代表组件被渲染时将使用hello-world.component.css文件中定义的样式。Angular 2有一个概念叫样式封装，意思就是样式被指定到特定的组件上时它只能仅仅对这一组件起作用。以后会有样式封装更深入的讨论。styleUrls和template的值有不同，styleUrls的值可以是数组，这样我们就可以使用多个样式来渲染一个组件。

加载组件

创建组件之后，如果我们立即在浏览器里访问我们的应用，你会发现没有什么变化。这是因为你只创建了组件，而没有使用它。

我们需要将组件标签增加到已经可以被浏览器渲染的模板中。我们可以将<app-hello-world></app-hello-world>标签放入src/app/app.component.html中，因为app.component.html文件是index.html中<app-root>标签对应的模板文件。修改后的app.component.html如下：

<h1>
  {{title}}
  <app-hello-world></app-hello-world>
</h1>

这时使用浏览器访问我们的应用看到的如下：

app works!
hello-world works!

自定义的组件已经很好的在浏览器里工作了，后面组件（二）会添加一些数据在组件里看看是什么效果。

欢迎关注，互相交流学习

个人博客地址：http://sithome.oschina.io

转载于:https://my.oschina.net/sithome/blog/830526