专栏首页CWIKIUSAngular 英雄编辑器
原创

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。

创建英雄组件

使用 Angular CLI 创建一个名为 heroes 的新组件。

ng generate component heroes

CLI 创建了一个新的文件夹, src/app/heroes/,并生成了 HeroesComponent 的 4 个文件。

HeroesComponent 的类文件如下:

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

 符号,并为组件类加上 @

Component

 注解。

@Component 是一个修饰器函数,这个函数为组件指定了 Angular 元数据。

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

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

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

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

始终要 export 这个组件类,以便于在其它地方(比如 AppModule)导入它。

添加一个 hero 属性

往 HeroesComponent 中添加一个 hero 属性,用来表示一个名叫 “Windstorm” 的英雄。

hero = 'Windstorm';

显示英雄

打开模板文件 heroes.component.html。删除 Angular CLI 自动生成的默认内容,改为到 hero 属性的数据绑定。

heroes.component.html

{{hero}}

显示 HeroesComponent 视图

要显示 HeroesComponent 你必须把它加到壳组件 AppComponent 的模板中。

别忘了,app-heroes 就是 HeroesComponent 的 元素选择器(element selector)。 所以,只要把 <app-heroes> 元素添加到 AppComponent 的模板文件(app.component.html)中就可以了,就放在标题下方。

app.component.html

<h1>{{title}}</h1><app-heroes></app-heroes>

如果 CLI 的 ng serve 命令仍在运行,浏览器就会自动刷新,并且同时显示出应用的标题和英雄的名字。

创建一个 Hero 类

真实的英雄当然不仅仅只有一个名字。

在 src/app 文件夹中为 Hero 类创建一个文件,并添加 id 和 name 属性。

src/app/hero.ts

export class Hero {  id: number;  name: string;}

回到 HeroesComponent 类,并且导入这个 Hero 类。

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

修改后的 HeroesComponent 类应该是这样的:

src/app/heroes/heroes.component.ts

import {Component, OnInit} from '@angular/core';import {Hero} from '../hero'; @Component({  selector: 'app-heroes',  templateUrl: './heroes.component.html',  styleUrls: ['./heroes.component.css']})export class HeroesComponent implements OnInit {   hero: Hero = {    id: 1,    name: 'Windstorm'  };   constructor() {  }   ngOnInit() {  } }

页面显示变得不正常了,因为你刚刚把 hero 从字符串改成了对象。

显示 hero 对象

修改模板中的绑定,以显示英雄的名字,并在详情中显示 id 和 name,就像这样:

heroes.component.html (HeroesComponent 的模板)

<h2>{{hero.name}} Details</h2><div><span>id: </span>{{hero.id}}</div><div><span>name: </span>{{hero.name}}</div>

浏览器自动刷新,并显示这位英雄的信息。

使用 UppercasePipe 进行格式化

把 hero.name 的绑定修改成这样:

<h2>{{hero.name | uppercase}} Details</h2>

对浏览器进行刷新。现在,你会发现英雄的名字显示成了大写字母。

位于管道操作符( | )的右边的单词 uppercase 表示的是一个插值绑定,用于调用内置的 UppercasePipe。

管道(Pipes) 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道,当然你还可以创建自己的管道。

编辑英雄

用户应该能在一个 <input> 文本输入框(textbox)中编辑英雄的名字。

当用户输入时,这个输入框应该能同时显示修改英雄的 name 属性。 也就是说,数据流从组件类流出到屏幕,并且从屏幕流回到组件类

要想让这种数据流动自动化,就要在表单元素 <input> 和组件的 hero.name 属性之间建立双向数据绑定。

双向绑定

把 HeroesComponent 模板中的英雄详情区重构成这样:

src/app/heroes/heroes.component.html (HeroesComponent 模板)

<div>  <label>name:    <input [(ngModel)]="hero.name" placeholder="name"/>  </label></div>

[(ngModel)] 是 Angular 的双向数据绑定句法。

这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上,以便数据流可以双向流动:从 hero.name 属性流动到 textbox,并且从 textbox 流回到 hero.name 。

缺少 FormsModule

注意,当你加上 [(ngModel)] 之后这个应用无法工作了。

打开浏览器的开发工具,就会在控制台中看到如下信息:

Uncaught Error: Template parse errors:Can't bind to 'ngModel' since it isn't a known property of 'input'.

虽然 ngModel 是一个有效的 Angular 指令,不过它在默认情况下是不可用的。

它属于一个可选模块 FormsModule,你必须自行添加此模块才能使用该指令。

AppModule

Angular 需要知道如何把应用程序的各个部分组合到一起,以及该应用需要哪些其它文件和库。 这些信息被称为元数据(metadata)

最重要的 @NgModule 装饰器位于顶级类 AppModule 上。

Angular CLI 在创建项目的时候就在 src/app/app.module.ts 中生成了一个 AppModule 类。 这里也就是你要添加 FormsModule 的地方。

导入 FormsModule

打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。

app.module.ts (FormsModule 符号导入)

import {FormsModule} from '@angular/forms';

然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中,这里是该应用所需外部模块的列表。

app.module.ts(@NgModule 导入)

imports: [  BrowserModule,  FormsModule],

刷新浏览器,应用又能正常工作了。你可以编辑英雄的名字,并且会看到这个改动立刻体现在这个输入框上方的 <h2> 中。

声明 HeroesComponent

每个组件都必须声明在(且只能声明在)一个 NgModule 中。

没有声明过 HeroesComponent,可为什么应用却正常工作呢?

这是因为 Angular CLI 在生成 HeroesComponent 组件的时候就自动把它加到了 AppModule 中。

打开 src/app/app.module.ts 你可以在顶部找到 HeroesComponent 已经被导入过了。

src/app/app.module.ts

import {HeroesComponent} from './heroes/heroes.component';

HeroesComponent 也已经声明在了 @NgModule.declarations 数组中。

declarations: [  AppComponent,  HeroesComponent],

注意:AppModule 声明了应用中的所有组件,AppComponent 和 HeroesComponent

最终代码预览

应用跑起来应该是这样的:在线例子 / 下载范例

如果你想直接在 stackblitz 运行本页中的例子,请单击链接:https://stackblitz.com/github/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

本页中所提及的代码如下:https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor

对应的文件列表和代码链接如下:

文件名

源代码

src/app/heroes/heroes.component.ts

https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/heroes/heroes.component.ts

src/app/heroes/heroes.component.html

https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/heroes/heroes.component.html

src/app/app.module.ts

https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.module.ts

src/app/app.component.ts

https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.ts

src/app/app.component.html

https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/app.component.html

src/app/hero.ts

https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor/blob/master/src/app/hero.ts

小结

  • 你使用 CLI 创建了第二个组件 HeroesComponent
  • 你把 HeroesComponent 添加到了壳组件 AppComponent 中,以便显示它。
  • 你使用 UppercasePipe 来格式化英雄的名字。
  • 你用 ngModel 指令实现了双向数据绑定。
  • 你知道了 AppModule
  • 你把 FormsModule 导入了 AppModule,以便 Angular 能识别并应用 ngModel 指令。
  • 你知道了把组件声明到 AppModule 是很重要的,并认识到 CLI 会自动帮你声明它。

https://www.cwiki.us/display/AngularZH/The+Hero+Editor

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行

    kubernetes监控指标大体可以分为两类:核心监控指标和自定义指标,核心监控指标是kubernetes内置稳定可靠监控指标,早期由heapster完成,现由metric-server实现;自定义指标用于实现核心指标的扩展,能够提供更丰富的指标支持,如应用状态指标,自定义指标需要通过Aggregator和k8s api集成,当前主流通过promethues实现。

    HappyLau谈云计算
    Kubernetes容器微服务微服务架构腾讯微服务平台 TFS
  • 三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统

    之前由于学摄影的关系,为了提高自己的审美,顺便锻炼下自己的英文能力,翻译了不少国外艺术类的 文章。最近一直想搭一个个人博客来存放这些内容,又懒得折腾建站,遂一直搁置。

    Aceyclee
    ServerlessHTML网站GitGitHub
  • NVM作为主存上对数据库管理系统的影响

    implications of non-volatile memory as primary storage for database management systems

    yzsDBA
    存储缓存数据库数据结构SQL
  • DevOps平台架构演进

    附最新架构图https://www.processon.com/view/5cbd897de4b0bab90962c435

    我思故我在
    DevOps 解决方案微服务架构架构设计
  • 【腾讯云AI小程序大赛】中山大学作品《小耳朵天使》

    ----------------------------------------------------------------------------------

    陈华山
    小程序 · 云开发小程序语音识别文字识别对话机器人
  • Kona JDK 在腾讯大数据领域内的实践与发展

    经常听人谈到 OpenJDK,那它到底是什么呢?相信大家都听说过 Java SE、ME、EE等规范, 通常意义上对 Open JDK 的定义指:Java SE规范的一个免费和开源参考实现。

    腾小云
    JDKJavaJVM大数据Oracle
  • 公告丨腾讯安全产品更名通知

    为了更好地为政企客户的安全保驾护航,腾讯安全即日起更新旗下身份安全、网络安全、终端安全、应用安全、数据安全、业务安全、安全管理、安全服务等八类安全产品的命名,致力于打造全栈安全产品“货架”,让客户选购安全产品/服务更加便捷,更快地找到合适的安全产品,从而对自身的安全建设“对症下药”。

    腾讯安全
    DDoS 防护应用安全 MS验证码(业务安全)应用安全(移动安全)漏洞扫描服务
  • Kubernetes系列学习文章 - 网络实现(八)

    | 导语 前面介绍了很多K8S的概念以及架构方面的东西,这里我们说说K8S的网络。云计算里面的网络向来是复杂的,因为里面牵扯到硬件网络跟虚拟网络的交互。尤其是虚拟网络,比较抽象,如果不搞清楚,一些问题排障将寸步难行。

    宝哥@devops运维
    KubernetesDocker容器
  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    导语 | 受到疫情影响,很多企业开始考虑远程办公。近日,TVP群里的各位老师们对此话题展开了热烈讨论。TVP张善友老师作为一名创业者,也决定开启远程办公。本文是他做了调研、试用后所总结的方案,并列出了相关产品清单,希望对读者有所帮助。文末也对各位TVP老师的相关语录进行了整理。「TVP思享」专栏,凝结大咖思考,汇聚专家分享,收获全新思想,欢迎长期关注。(编辑:云加社区 尾尾)

    尾尾
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • FFmpeg图像处理深度应用

    感谢大家关注FFmpeg在OnVideo以及AI方面的一些工作,我是刘歧,是OnVideo联合创始人的同时也担任技术负责人,同时也是FFmpeg的官方顾问,FFmpeg GSoC 2019 Mentor,FFmpeg决策委员会的委员,以及腾讯云TVP。我主要的兴趣在嵌入式开发、图形图像及音视频流媒体处理、分布式系统设计等领域。FFmpeg官方有我的联系方式,大家有问题可以和我随时交流。关于FFmpeg深度学习场景下的应用,目前看来,颇具价值且实用。

    LiveVideoStack
    视频处理图像处理OpenGLAPIOpenCV

扫码关注云+社区

领取腾讯云代金券