按照官网实现一个英雄编辑器

最新推荐文章于 2025-06-09 11:12:35 发布

原创最新推荐文章于 2025-06-09 11:12:35 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

Angular 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用Angular CLI创建并启动一个名为angular-tour-of-heroes的应用，包括设置组件标题、添加应用样式，以及创建英雄列表组件的过程。

先建立一个新的工作空间 angular-tour-of-heroes

启动这个应用

Angular 组件

所看到的页面就是应用的外壳，该外壳是被一个叫AppComponent 的Angular 组件控制的。

修改标题

打开项目文件，访问/src/app，在该目录下，可以看到AppComponent 壳的三个实现文件：

- app.component.ts 组件的类代码，用TypeScript 写的

- app.component.html 组件的模板，用 HTML 写的

- app.component.css 组件的私有css 样式

然后将 app.component.ts 中的titile 属性值设为 'tour of heroes'

然后打开 app.component.html 清空，改为下面的内容

插值绑定 {{}} ，将组件的title 属性绑定到该HTML 元素中。

添加应用样式

为了让应用保持一种一致的外观，angular cli 会生成一个空的 style.css ，可以将全应用级别的样式放进去。如下。即可改变壳的样式。

h1 {
	color: #369;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 250%;
}
h2, h3 {
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
}
body {
	margin: 2em;
}
body, input[text], button {
	color: #888;
	font-family: Cambria, Georgia;
}

* {
	font-family: Arial, Helvetica, sans-serif;
}

接下来，英雄编辑器

创建英雄列表组件

使用 Angular cli 创建一个英雄的新组件名叫heroes

CLI 创建了一个文件夹 heroes 在src/app目录下

heroes.component 的类文件heroes.component.ts 如下：

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

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

  constructor() { }

  ngOnInit() {
  }

}

其中，第一行，从angular 核心库中导入了 Component 和 OnInit。接着为组件装上了@Component 装饰器。

@Component是一个装饰器函数，用于为组件指定 Angular 所需的元数据。

CLI 自动生成了三个元数据：

- selector 组件的选择器（CSS 元素选择器）

- templateUrl 组件模板文件的位置

- styleUrls 组件私有 CSS 样式表文件的位置

CSS 选择器 app-heroes 用来在父组件的模板中匹配HTML 元素的名称，以识别出该组件。

ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit. 这里是放置初始化逻辑的好地方。

始终要export 这个组件类，以便在其它地方（比如 AppModule）导入它。

添加 hero 属性

往 HeroesComponent 中添加一个heroes 属性，用来表示一个名叫“Ann” 的英雄。

heroes.component.ts 文件