angular官网实例(综合)
第一部分:
(应用的“外壳”)
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
,否则就会移除它。
第四部分:
- 在上一节中,My
HeroesComponent
同时显示了 "英雄列表" 和 "所选英雄的详情" 两部分内容。现在要把 "英雄详情" 移入一个独立的、可复用的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官网实例(综合)的更多相关文章
- activiti官网实例项目activiti-explorer之扩展流程节点属性2
情景需求:需要查找activiti-explorer项目中获取流程id的方法,然后根据流程id获取相应字段在节点属性中添加内容. 大致流程:拿取整个流程id获取对应表单属性,在页面节点属性中展示对应表 ...
- Knockout官网实例在MVC下的实现-02,实现计次
本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...
- Knockout官网实例在MVC下的实现-01,实现Hello world
本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bind ...
- 官网实例详解-目录和实例简介-keras学习笔记四
官网实例详解-目录和实例简介-keras学习笔记四 2018-06-11 10:36:18 wyx100 阅读数 4193更多 分类专栏: 人工智能 python 深度学习 keras 版权声明: ...
- [ActionScript 3.0] Away3D 官网实例
/* Dynamic tree generation and placement in a night-time scene Demonstrates: How to create a height ...
- 关于Angular官网《英雄指南》教程几点问题修正(此问题在2018年4月份有效,以后可能就订正了)
1.官网中在导入“of”关键字时的引用为: import { Observable, of } from 'rxjs'; 应该改为: import { Observable } from 'rxjs/ ...
- Android自动化学习笔记之Robotium:学习官网实例
---------------------------------------------------------------------------------------------------- ...
- [转]angular官网 及 Ant Design of Angular
https://angular.io/cli https://www.angular.cn/guide/quickstart https://ng.ant.design/docs/introduce/ ...
- angular 官网英雄案例 报错整理
1.导入of 报错 import { of } from 'rxjs/observable/of'; 2. 服务注入报错 在app.module.ts引入 3.使用angular-in-memory- ...
随机推荐
- Egret《决战沙城》框架学习
源码地址:https://github.com/yicaoyimuys/EgretGameEngine 虽然走花观马看了看,但是收获还是蛮多. mvc: BaseController ...
- 全文搜索引擎Elasticsearch详细介绍
我们生活中的数据总体分为两种:结构化数据 和 非结构化数据. 结构化数据:也称作行数据,是由二维表结构来逻辑表达和实现的数据,严格地遵循数据格式与长度规范,主要通过关系型数据库进行存储和管理.指具有固 ...
- Flask 学习(二)jinja2模板介绍
控制语句和表达式 举例 Flask Python代码 from flask import Flask, render_template, redirect, request app = Flask(_ ...
- LwIP应用开发笔记之七:LwIP无操作系统HTTP服务器
前面我们实现了TCP服务器和客户端的简单应用,接下来我们实现一个基于TCP协议的应用协议,那就是HTTP超文本传输协议 1. HTTP协议简介 超文本传输协议(Hyper Text Transf ...
- idea 模糊搜索 ctrl + f(单词不完整搜索不到的解决办法)
1,现象描述,笔者在用 idea 的 ctrl + f 搜索文件的内容时,发现了很神奇的问题,就是字符串必须输入完整才能搜索到,输入一半,哪怕是个字母输入了9个也搜不到 2,可以发现,就差一个字母 h ...
- vim、vi 快捷键
普通模式 移动光标 nj.nk 上下移动n行 nb.nw 前后移动n个单词 nh.nl 左右移动n个字符 L 移到屏幕的最后一行 M 移到屏幕的中间一行 H 移到屏幕的第一行 nG 移到文件第n行 G ...
- Jmeter(一) Jmeter基本使用
1.下载安装 官方网站 https://jmeter.apache.org/download_jmeter.cgi 选择下载即可 2.基本使用 下载解压后,目录如下: 进入到bin目录, 双击jmet ...
- GraphQL&DSL&API网关
车联网服务non-RESTful架构改造实践 导读 在构建面向企业项目.多端的内容聚合类在线服务API设计的过程中,由于其定制特点,采用常规的restful开发模式,通常会导致大量雷同API重复开 ...
- Spring security oauth2 password flow
Spring security oauth2 包含以下两个endpoint来实现Authorization Server: AuthorizationEndpoint: 授权请求访问端点, 默认url ...
- 域名解析中的cname解析和显性URL跳转和隐性URL跳转三者有什么区别
通俗的来讲,cname解析还是属于dns解析,只是把某个域名解析到另外一个域名对应的某个IP的空间中,所以还需要在服务器端(比如nginx)做域名解析(比如把baidu.com做一个cname解析到i ...