第一部分:

  (应用的“外壳”

1、新建项目:

  • ng new mytest

2、进入项目目录,并启动这个应用。

  • cd mytest
  • ng serve --open

3、添加一个标题

  • 打开 app.component.ts            title = 'Tour of Heroes';
  • 打开 app.component.html        <h1>{{title}}</h1>

 

第二部分:

(英雄编辑器)

1、创建组件 myHeros

  • ng generate component myHeroes

2、在 myHeroes.component.ts 中定义数组

3、在 myHeroes.component.html中使用并绑定数组的值,通过 ([ngModel]) 绑定input可修改值

  

  • 补充

我这里省略了angular官网上的把一个步骤:创建一个类 ,下面简单补充一下创建和使用这个类:

    • 创建 Hero 类:在 src/app 文件夹中为 Hero 类创建一个文件(hero.ts),并添加 id 和 name 属性。 export class Hero { id: number; name: string; }
    • 在要使用到 Hero 类的组件里要 import 这个 hero.ts ,比如在 myHeroes.component.ts 中;             import { HeroService } from '../hero.service';
    • 使用 Hero 类:hero: Hero = { id: 1, name: 'Windstorm' };

 

第三部分:

(显示英雄列表)

1、定义一个数组 heros ,通过 *ngFor 循环,在<li>标签上展示出单个 hero 的属性

2、在<li>标签上添加 click 事件绑定,通过点击这个事件在下面展示出被点击的这一项

3、添加 click 事件处理器,在这里给 selectedHero 赋值

  • selectedHero: any;
  • onSelect(item){ this.selectedHero = item; }

3、使用 *ngIf 隐藏空白的详情

  • 把要显示的hero详情的 HTML 包裹在一个 <div> 中, 并且为这个 div 添加 Angular 的 *ngIf 指令,把它的值设置为 selectedHero。(初始化没有,点击之后才有)
  • 当 selectedHero 为 undefined 时,ngIf 从 DOM 中移除了英雄详情
  • 当用户选择一个英雄时,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM 中。

4、给所选英雄添加样式

  • 所选英雄的颜色来自于CSS 样式中的类 .selected
  • 如果当前行的英雄和 selectedHero 相同,Angular 就会添加 CSS 类 selected,否则就会移除它。

 

第四部分:

( 主从组件)

  • 在上一节中,MyHeroesComponent 同时显示了 "英雄列表" 和 "所选英雄的详情" 两部分内容。现在要把 "英雄详情" 移入一个独立的、可复用的 HeroDetailComponent组件中;

1、新建一个名叫 hero-detail 的新组件 ng g component hero-detail

2、从 HeroesComponent 模板的底部把表示英雄详情的 HTML 代码剪切粘贴到所生成的 HeroDetailComponent 模板中

3、所粘贴的 HTML 引用了 selectedHero。 但是,新的 HeroDetailComponent 可以展示任意英雄,而不仅仅所选的。因此还要把模板中的所有 selectedHero 替换为 item

  • 在你从模板中剪切走代码之前,它自己负责显示英雄的详情。现在它要把这个职责委托给 HeroDetailComponent 了。讲 "英雄详情" 移入子组件之后,添加 @Input() item 属性

1、在myHeros.component.html 中添加 HeroDetail的占位符:  <app-hero-detail [item]="selectedHero"></app-hero-detail>

2、在heros.detail.component.ts 中添加个带有 @Input() 装饰器的 item属性,这个组件所做的只是通过 hero 属性接收一个英雄对象,并显示它。 @Input() item;

  • 注:(1) [item]="selectedHero"  是属性绑定的语法,是父子组件之间通讯的重要途径;

(2)组件通讯有两种方式:父到子(用@Input装饰器)  、  子到父(用@Output装饰器)

语法:   @Input() name: number;

  

  • 有哪些变化?

  • 像第三部分一样,一旦用户点击了一个英雄的名字,该英雄的详情就显示在了英雄列表下方。 现在,HeroDetailComponent 负责显示那些详情,而不再是 HeroesComponent

angular官网实例(综合)的更多相关文章

  1. activiti官网实例项目activiti-explorer之扩展流程节点属性2

    情景需求:需要查找activiti-explorer项目中获取流程id的方法,然后根据流程id获取相应字段在节点属性中添加内容. 大致流程:拿取整个流程id获取对应表单属性,在页面节点属性中展示对应表 ...

  2. Knockout官网实例在MVC下的实现-02,实现计次

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...

  3. Knockout官网实例在MVC下的实现-01,实现Hello world

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bind ...

  4. 官网实例详解-目录和实例简介-keras学习笔记四

    官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras   版权声明: ...

  5. [ActionScript 3.0] Away3D 官网实例

    /* Dynamic tree generation and placement in a night-time scene Demonstrates: How to create a height ...

  6. 关于Angular官网《英雄指南》教程几点问题修正(此问题在2018年4月份有效,以后可能就订正了)

    1.官网中在导入“of”关键字时的引用为: import { Observable, of } from 'rxjs'; 应该改为: import { Observable } from 'rxjs/ ...

  7. Android自动化学习笔记之Robotium:学习官网实例

    ---------------------------------------------------------------------------------------------------- ...

  8. [转]angular官网 及 Ant Design of Angular

    https://angular.io/cli https://www.angular.cn/guide/quickstart https://ng.ant.design/docs/introduce/ ...

  9. angular 官网英雄案例 报错整理

    1.导入of 报错 import { of } from 'rxjs/observable/of'; 2. 服务注入报错 在app.module.ts引入 3.使用angular-in-memory- ...

随机推荐

  1. Egret《决战沙城》框架学习

    源码地址:https://github.com/yicaoyimuys/EgretGameEngine 虽然走花观马看了看,但是收获还是蛮多. mvc: BaseController          ...

  2. 全文搜索引擎Elasticsearch详细介绍

    我们生活中的数据总体分为两种:结构化数据 和 非结构化数据. 结构化数据:也称作行数据,是由二维表结构来逻辑表达和实现的数据,严格地遵循数据格式与长度规范,主要通过关系型数据库进行存储和管理.指具有固 ...

  3. Flask 学习(二)jinja2模板介绍

    控制语句和表达式 举例 Flask Python代码 from flask import Flask, render_template, redirect, request app = Flask(_ ...

  4. LwIP应用开发笔记之七:LwIP无操作系统HTTP服务器

    前面我们实现了TCP服务器和客户端的简单应用,接下来我们实现一个基于TCP协议的应用协议,那就是HTTP超文本传输协议 1.  HTTP协议简介   超文本传输协议(Hyper Text Transf ...

  5. idea 模糊搜索 ctrl + f(单词不完整搜索不到的解决办法)

    1,现象描述,笔者在用 idea 的 ctrl + f 搜索文件的内容时,发现了很神奇的问题,就是字符串必须输入完整才能搜索到,输入一半,哪怕是个字母输入了9个也搜不到 2,可以发现,就差一个字母 h ...

  6. vim、vi 快捷键

    普通模式 移动光标 nj.nk 上下移动n行 nb.nw 前后移动n个单词 nh.nl 左右移动n个字符 L 移到屏幕的最后一行 M 移到屏幕的中间一行 H 移到屏幕的第一行 nG 移到文件第n行 G ...

  7. Jmeter(一) Jmeter基本使用

    1.下载安装 官方网站 https://jmeter.apache.org/download_jmeter.cgi 选择下载即可 2.基本使用 下载解压后,目录如下: 进入到bin目录, 双击jmet ...

  8. GraphQL&DSL&API网关

    车联网服务non-RESTful架构改造实践   导读 在构建面向企业项目.多端的内容聚合类在线服务API设计的过程中,由于其定制特点,采用常规的restful开发模式,通常会导致大量雷同API重复开 ...

  9. Spring security oauth2 password flow

    Spring security oauth2 包含以下两个endpoint来实现Authorization Server: AuthorizationEndpoint: 授权请求访问端点, 默认url ...

  10. 域名解析中的cname解析和显性URL跳转和隐性URL跳转三者有什么区别

    通俗的来讲,cname解析还是属于dns解析,只是把某个域名解析到另外一个域名对应的某个IP的空间中,所以还需要在服务器端(比如nginx)做域名解析(比如把baidu.com做一个cname解析到i ...