Angular2.js——多个组件
目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个。然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处。如果我们需要在其他地方复用英雄详情组件,英雄列表组件也会跟着混进去。
我们当前的组件违反了单一职责原则,我们需要把英雄详情拆分成一个独立的组件。
1、拆分英雄详情组件
在app目录下创建一个名叫hero-detail-component.ts的文件,并且创建HeroDetailComponent组件,代码如下:
import { Component,Input } from '@angular/core'; //Component装饰器,Input输入装饰器
import {Heroo} from './hero';
@Component({
selector: 'my-hero-detail', })
export class HeroDetailComponent { }
命名规则:我们希望一眼能看出哪些是组件,哪些是文件包含组件,我们所有的组件名都以.component结尾,我们组建的文件名都以.component结尾。
2、英雄的详情模板
接下来我们需要把英雄详情的模板放到这个组件中来:
import { Component,Input } from '@angular/core';
@Component({
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}}详细信息</h2>
<div><label>id:</label>{{hero.id}}</div>
<div>
<label>姓名:</label>
<input [(ngModel)]="hero.name" placeholder="name">
</div>
</div>
`
})
export class HeroDetailComponent { }
3、添加hero属性
我们在app.component.ts和hero-detail-component.ts中都需要引用Heroo这个类,所以我们把这个类新建一个文件夹hero.ts
export class Heroo{
id:number;
name:string;
}
同时我们在两个组件中AppComponent和HeroDetailComponent都导出这个类
import {Heroo} from './hero';
还得告诉HeroDetailComponent显示那个英雄,谁告诉他呢?当然是AppComponent了。
AppComponent确实知道该显示哪个英雄,用户从列表中选中的那个,用户选择的英雄在他的selectrdHero属性中。
我们需要在AppComponent模板中添加:将hero属性复制为selectedHero属性,使得AppComponent组件和HeroDetailComponent组件形成联系。
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
同时修改hero-detail-component.ts
export class HeroDetailComponent {
@Input()
hero:Heroo;//带有@Input()装饰器的输入属性
}
4、更新AppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent1 } from './app.component';
import {HeroDetailComponent} from './hero-detail.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent1,
HeroDetailComponent
],
bootstrap: [ AppComponent1 ]
})
export class AppModule { }
这样,我们创建了第一个可复用组件!
我们可以在应用中的任何地方使用这个HeroDetailComponent组件来显示英雄详情。
参考:https://angular.cn/docs/ts/latest/tutorial/toh-pt3.html
Angular2.js——多个组件的更多相关文章
- angular2的ElementRef在组件中获取不到
angular2的ElementRef在组件中获取不到 angular2不推荐操作dom,但是实际应用中不可避免的需要使用到dom操作,怎么操作,官方文档提供了一系列api(ElementRef,Vi ...
- 《Ext JS模板与组件基本知识框架图----模板》
最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...
- 转: Vue.js——60分钟组件快速入门(上篇)
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- 转:Node.js邮件发送组件- Nodemailer 1.0发布
原文来自于http://www.infoq.com/cn/news/2014/07/node.js-nodemailer1.0-publish Nodemailer是一个简单易用的Node.js邮件发 ...
- vue.js 精学组件记录
组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...
- vue.js相关UI组件收集
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...
- JS日期级联组件代码分析及demo
最近研究下JS日期级联效果 感觉还不错,然后看了下kissy也正好有这么一个组件,也看了下源码,写的还不错,通过google最早是在2011年 淘宝的虎牙(花名)用原审JS写了一个(貌似据说是从YUI ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
随机推荐
- hdoj1072 Nightmare bfs
题意:在一个地图里逃亡,2是起点,3是终点,1是路,0是墙,逃亡者携带一个炸弹,6分钟就会炸,要在6分钟前到达4可以重制时间,问是否能逃亡,若能则输出最小值 我的思路:bfs在5步内是否存在3,存在则 ...
- 构建微服务(Building Microservices)-PDF 文档
闲时翻译了几篇基于Spring Cloud.Netflix OSS 构建微服务的英文文章,为方便分享交流,整理为PDF文档. PDF 文档目录: 目录 一.微服务操作模型... 3 1. 前提 ...
- (22)Properties,这不会Io流中的类,但是通常和IO流中的一些流配合使用
可以和流相关联的集合对象Properties. Map |--Hashtable |--Properties Properties:该集合不需要泛型,因为该集合中的键值对都是String类型.既然是m ...
- 微信JS初始化--微信JS系列文章(一)
概述 微信JS的使用方法,官方文档已经描述得比较清楚了,这里我就不重复介绍了,本文意在提供现成的代码,供大家快速迭代开发,以及补充一下官方文档描述得不够清楚的地方,避免大家踩相同的坑. 微信JS初始化 ...
- 用C写一个web服务器(二) I/O多路复用之epoll
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...
- Linux之lsof命令
lsof是一个列出当前系统中所有打开文件的工具 lsof filename 显示打开指定文件的所有进程 lsof -c string 显示COMMAND中包含指定字符的进程的所有打开文件 ...
- 自适应的tab菜单栏
代码部分: Css代码:*{ margin:0px; padding:0px; font-size:62.5%;}body{ background-color:#FFFFFF;}.zw-test-ti ...
- bootstrap-typeahead自动补充
官方文档:https://github.com/bassjobsen/Bootstrap-3-Typeahead 这个是基于bootstrap的typeahead与基于jquery的jquery-Ty ...
- Servlet小总结(转)
一,什么是Servlet? Servlet是一个Java编写的程序,此程序是基于Http协议的,在服务器端运行的(如tomcat), 是按照Servlet规范编写的一个Java类. 二,Servlet ...
- 老李推荐:第5章6节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 初始化事件源
老李推荐:第5章6节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 初始化事件源 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试 ...