Angular课程实验手册（二）

在本系列的上一篇文章中，我们安装了开发Angular应用所需要的软件，构建了todo-web-app项目，在本文中，就来给大家演示并初步认识Angualr中的组件。

为了在所有页面都有相同的头部，我们添加一个header组件
在todo-web-app项目的根目录，执行

1	D:\todo-web-app>ng g component components\layout\header

系统将显示:

CREATE src/app/components/layout/header/header.component.html (25 bytes)
CREATE src/app/components/layout/header/header.component.spec.ts (628 bytes)
CREATE src/app/components/layout/header/header.component.ts (269 bytes)
CREATE src/app/components/layout/header/header.component.css (0 bytes)
UPDATE src/app/app.module.ts (493 bytes)

然后，我们可以看到在项目目录中，新增了header组件，该组件被放置在PROJECT_ROOT/src/app/component/layout/目录下

todo-web-app
   + src
      + app
         + components
            + layout
               header.component.css
               header.component.html
               header.component.spec.ts
               header.component.ts

修改模板文件

打开header组件的模板文件 - header.component.html, 它现在是自动生成的内容:

1
2
3

<p>
  header works!
</p>

删除这些内容，然后加入我们的代码，显示标题，为了让组件有更好的通用性，我们把标题定义为一个变量: title, 更改后的代码如下:

1
2
3

<div>
    {{ title }}
</div>

修改程序文件

打开header组件的程序文件 - header.component.ts, 它现在是自动生成的内容:

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

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

  constructor() { }

  ngOnInit() {
  }

}

我们为组件添加一个属性：title, 为了让组件更通用，我们将这个属性设计为输入变量（用@Input修饰，详细的原来可以看这边文章: 用@Input装饰器为Angular中的组件传值）,更改后的完整代码如下:

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

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

  @Input()
  title: string;

  constructor() { }

  ngOnInit() {
  }

}

修改样式文件

为了在应用运行时能看到明显的效果，我们为header组件加上一个边框，修改组件对应的css代码即可, 打开header.component.css文件，加入以下内容:

1
2
3

div {
    border: 1px solid #778899;
}

现在，我们把新的组件放置在应用首页里，打开 src/app 目录下的 app.component.html 文件，先删除所有内容，然后加上下面的几行html:

<!--The content below is only a placeholder and can be replaced.-->
<app-header title="Angular课程"></app-header>
<div>
  body....
</div>

运行应用，查看结果

修改完以上的代码后，执行ng serve启动应用，然后在浏览器中访问 http://localhost:4200 就可以查看程序运行的效果了。

课后作业

开发一个放置在每个页面的页脚的，显示版权信息的组件。

下一步

下一步，我们将带大家实验构建更复杂，更通用的组件: Angular课程实验手册（三）