目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个。然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处。如果我们需要在其他地方复用英雄详情组件,英雄列表组件也会跟着混进去。

我们当前的组件违反了单一职责原则,我们需要把英雄详情拆分成一个独立的组件。

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——多个组件的更多相关文章

  1. angular2的ElementRef在组件中获取不到

    angular2的ElementRef在组件中获取不到 angular2不推荐操作dom,但是实际应用中不可避免的需要使用到dom操作,怎么操作,官方文档提供了一系列api(ElementRef,Vi ...

  2. 《Ext JS模板与组件基本知识框架图----模板》

    最近在整理Ext JS的模板和组件,在参考<Ext JS权威指南>,<Ext JS Web应用程序开发指南>,<Ext JS API>等相关书籍后才写下这篇< ...

  3. 转: Vue.js——60分钟组件快速入门(上篇)

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  4. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  5. 转:Node.js邮件发送组件- Nodemailer 1.0发布

    原文来自于http://www.infoq.com/cn/news/2014/07/node.js-nodemailer1.0-publish Nodemailer是一个简单易用的Node.js邮件发 ...

  6. vue.js 精学组件记录

    组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...

  7. vue.js相关UI组件收集

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ###UI组件 element ★9689 - 饿了么出品的Vue2的web UI工具套件 Vux ★6927 - 基于Vu ...

  8. JS日期级联组件代码分析及demo

    最近研究下JS日期级联效果 感觉还不错,然后看了下kissy也正好有这么一个组件,也看了下源码,写的还不错,通过google最早是在2011年 淘宝的虎牙(花名)用原审JS写了一个(貌似据说是从YUI ...

  9. Vue.js 的精髓——组件

    开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...

随机推荐

  1. hdoj1072 Nightmare bfs

    题意:在一个地图里逃亡,2是起点,3是终点,1是路,0是墙,逃亡者携带一个炸弹,6分钟就会炸,要在6分钟前到达4可以重制时间,问是否能逃亡,若能则输出最小值 我的思路:bfs在5步内是否存在3,存在则 ...

  2. 构建微服务(Building Microservices)-PDF 文档

    闲时翻译了几篇基于Spring Cloud.Netflix OSS 构建微服务的英文文章,为方便分享交流,整理为PDF文档. PDF 文档目录: 目录 一.微服务操作模型... 3 1.     前提 ...

  3. (22)Properties,这不会Io流中的类,但是通常和IO流中的一些流配合使用

    可以和流相关联的集合对象Properties. Map |--Hashtable |--Properties Properties:该集合不需要泛型,因为该集合中的键值对都是String类型.既然是m ...

  4. 微信JS初始化--微信JS系列文章(一)

    概述 微信JS的使用方法,官方文档已经描述得比较清楚了,这里我就不重复介绍了,本文意在提供现成的代码,供大家快速迭代开发,以及补充一下官方文档描述得不够清楚的地方,避免大家踩相同的坑. 微信JS初始化 ...

  5. 用C写一个web服务器(二) I/O多路复用之epoll

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  6. Linux之lsof命令

    lsof是一个列出当前系统中所有打开文件的工具 lsof  filename   显示打开指定文件的所有进程 lsof  -c  string  显示COMMAND中包含指定字符的进程的所有打开文件 ...

  7. 自适应的tab菜单栏

    代码部分: Css代码:*{ margin:0px; padding:0px; font-size:62.5%;}body{ background-color:#FFFFFF;}.zw-test-ti ...

  8. bootstrap-typeahead自动补充

    官方文档:https://github.com/bassjobsen/Bootstrap-3-Typeahead 这个是基于bootstrap的typeahead与基于jquery的jquery-Ty ...

  9. Servlet小总结(转)

    一,什么是Servlet? Servlet是一个Java编写的程序,此程序是基于Http协议的,在服务器端运行的(如tomcat), 是按照Servlet规范编写的一个Java类. 二,Servlet ...

  10. 老李推荐:第5章6节《MonkeyRunner源码剖析》Monkey原理分析-启动运行: 初始化事件源

    老李推荐:第5章6节<MonkeyRunner源码剖析>Monkey原理分析-启动运行: 初始化事件源   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试 ...