Angular6学习笔记4：创建一个新的Angular组件，并将它展示出来

悠悠 2022-05-09 03:44 382阅读 0赞

# 创建一个新的Angular组件，并将它展示出来 #

继学习笔记3以后，创建的应用程序有了标题，现在要创建一个新的组件来显示hero的信息，并将它们展示出来。

## 1.新建一个新的Angular组件 ##

在命令行中(**注意要切换都项目路径下，如使用Webstorm在下方的Terminal中直接输入命令即可**)使用 Angular CLI 创建一个名为 `heroes` 的新组件。

ng generate component heroes

执行完以后会提示：

![70][]

这个过程中：CLI 创建了一个新的文件夹 `src/app/heroes/`，并生成了 `HeroesComponent` 的三个文件。

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

打开`HeroesComponent` 的类文件（heroes.component.ts）：

1.  `selector`— 组件的选择器（CSS 元素选择器）
2.  templateUrl— 组件模板文件的位置。
3.  styleUrls— 组件私有 CSS 样式表文件的位置。

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

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

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

## 2.在新建的组件中添加一个属性 ##

*  在`HeroesComponent的类文件（`heroes.component.ts`）中添加一个属性`

hero = 'Windstorm';

*  在`HeroesComponent的`模板文件`（`heroes.component.html`）中展示这个属性`

{
       {hero}}

*  显示 `HeroesComponent` 视图

`在heroes组件的类文件（`heroes.component.ts`）中selector（`组件的选择器）中的：“app-heroes”就是这个heroes组件的元素选择器，所以显示heroes组件，将`<app-heroes>` 元素添加到 `AppComponent` 的模板文件（app.component.html）中就可以了。

在src/app/app.component.html中：

1.  `<h1>{ {title}}</h1>`
2.  `<app-heroes></app-heroes>`

保存以后，浏览器自动刷新，出现一下界面：

![70 1][]

## 3.创建Hero类 ##

切换到src/app，命令行中(**注意要切换都项目路径下，如使用Webstorm在下方的Terminal中直接输入命令即可**)使用 Angular CLI 创建一个名为 `hero` 的新类。

1.  `wjydeMacBook-Pro:app wjy$ ng generate class hero`
2.  `CREATE src/app/hero.ts (22 bytes)`
3.

这样在src/app目录下，就会有一个Hero类，在Hero类中新增两个属性

1.  `export class Hero {`
2.  `id: number;`
3.  `name: string;`
4.  `}`

切换到`HeroesComponent` 类中，导入这个Hero类

import {Hero} from '../hero';

将Heroes组件的 `hero` 属性的类型重构为 `Hero`。 然后以 `1` 为 `id`、以 “Windstorm” 为名字初始化它。

1.  `hero: Hero = {`
2.  `id: 1,`
3.  `name: 'Windstorm',`
4.  `};`

此时，保存以后，页面就会显示的不正常，因为原来的hero属性是string型，现在是Object型。

![70 2][]

### **处理不正常的显示问题** ###

修改HeroesComponent模板中的绑定，以显示英雄的名字，并在详情中显示 `id` 和 `name，`

1.  `<h2>{ {hero.name}} Details</h2>`
2.  `<div><span>id: </span>{ {hero.id}}</div>`
3.  `<div><span>name: </span>{ {hero.name}}</div>`

保存以后，浏览器刷新就显示正常了；

![70 3][]

# #

[70]: /images/20220509/659234d1c14f47b5bd4bdc3127ba4cba.png
[70 1]: /images/20220509/aa92b14a65824b86851838a4f8883a67.png
[70 2]: /images/20220509/55a2dc25766b47689c9777816a943d41.png
[70 3]: /images/20220509/86ef3d544f244dbfa2cc64f502cbd658.png

发表评论取消回复

表情：

评论列表（有 0 条评论，382人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular6 学习笔记——指令

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: [https://www.angular.cn/guide/template-syntax][htt

偏执的太偏执、/ 2023年05月30日 15:58/ 0 赞/ 19 阅读

相关 angular2 如何创建一个新项目？

我们现在看看如何创建一个（2.0版本）的项目？我们可以自己一步步的配置所有需要的文件，也可以通过angular cli 这个很好用的工具来帮助我们创建一个an

港控/mmm°/ 2022年05月30日 10:54/ 0 赞/ 285 阅读

相关基于 Angular 4.0+ 的前端 UI 组件库 At-Angular

At-Angular 详细介绍 AT-Angular，基于 Angular 4 + 制作的一套 UI 框架，目前第一个测试版本已经发布。欢迎小伙伴门尝鲜。特性

「爱情、让人受尽委屈。」/ 2022年05月20日 08:35/ 0 赞/ 225 阅读

相关 Angular4笔记

Angular4笔记参考资料： [Angular 4.0 架构详解][Angular 4.0] [Angular 4.0 内置指令全攻略][Angular

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 01:57/ 0 赞/ 246 阅读

相关 Angular6学习笔记4：创建一个新的Angular组件，并将它展示出来

创建一个新的Angular组件，并将它展示出来继学习笔记3以后，创建的应用程序有了标题，现在要创建一个新的组件来显示hero的信息，并将它们展示出来。 1.新建一个

悠悠/ 2022年05月09日 03:44/ 0 赞/ 383 阅读

相关 Angular6学习笔记3：修改Angular组件:app.component

Angular组件继学习笔记2后，启动应用。浏览器出现如下界面： ![70][] 这个是由一个名称是 “`AppComponent”` 的 Angular 组件控制

小灰灰/ 2022年05月09日 01:52/ 0 赞/ 296 阅读

相关 angular6学习(五)：创建组键

两种创建方式：手动创建和命令创建手动创建：一：基础知识： ![70][] ![70 1][] 代码说明： ![70 2][] 二：代码实现： 1.在a

た入场券/ 2022年05月08日 23:38/ 0 赞/ 178 阅读

相关 Angular 学习（八）：Angular 组件间的通讯

Angular 组件间的通讯组件间三种典型关系： ![组件间的关系][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

朱雀/ 2021年09月29日 01:50/ 0 赞/ 462 阅读

相关 Angular 学习（九）：Angular 组件生命周期钩子

Angular 组件生命周期钩子 ![生命周期][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

我会带着你远行/ 2021年09月29日 01:50/ 0 赞/ 523 阅读

相关 Angular 学习（四）：Angular 组件（Component）

Angular 组件（Component）组件（Component）是构成 Angular 应用的基础和核心。通俗来说，组件用来包装特定的功能，应用程序的有序运

快来打我*/ 2021年09月29日 01:46/ 0 赞/ 469 阅读