angular2系列教程(三)components
今天,我们要讲的是angualr2的components。
例子
这个例子是个老外写的,我将其迁移到angular2beta版本,想了解迁移的同学可以参考我的做法。
消失的控制器
angular2的组件就是angual1中的指令。它包含模板、样式、注入、和选择器。
组件嵌套组件可以实现类似react的模块化,我曾经也用angular1做过类似的事情
我当时就想,既然有了指令(ng1)还要什么控制器(ng1)啊!果不其然ng2中移除了控制器,直接用指令也就是ng2的组件来展示界面:
app/navbar.ts
import { Component} from 'angular2/core'; import {NgFor} from 'angular2/common' @Component({ selector: "navbar", directives: [NgFor], styles: [` li{ color: gray; } `], template: ` <h2>Democratic Party presidential candidates</h2> <ul> <li *ngFor="#item of items; #i = index">{{item}} {{i}}</li> </ul> ` }) export class Navbar { items: Array<String> constructor() { this.items = [ "Hillary Clinton", "Martin O'Malley", "Bernie Sanders" ] } ngOnInit() { console.log('[Component] navbar onInit'); } }
当组件被实例化后,ng2为这个组件创建了一个shadow DOM(Shadow DOM在一个web组件中提供了js,css,template的封装),然后模板和样式被注入进去。
这段代码做了这些事情:
- 设置选择器
- 设置directives为[ngFor]
- 设置样式
- 设置模板
- 填写类的成员变量items
- 在构造函数中给items添加数据
- 在生命周期的钩子ngOnInit中打印信息
我们的组件就写好了。
组件的嵌套
写好组件后,我们如何将这个组件放在app组件中呢?答案是directives。这里设计得没有react好,react的组件是可以直接用的,angular2的组件则需要以指令的身份注入,因为组件实质也是指令:
app/app.ts
import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {Navbar} from './navbar'; @Component({ selector: "app", directives:[Navbar], template: ` <navbar></navbar> ` }) export class App { constructor() { } } bootstrap(App, []) .catch(err => console.error(err));
ng2中组件和指令都是注入在directives中,directives包含三种类型:
- Components
- Structural directives
- Attribute directives
关于指令,我们会单独拿出来讲解。
生命周期钩子
本例中,我们使用了ngOnInit这个类方法去打印一个信息,这个方法会在组件初始化时候调用。组件存在很多声明周期钩子函数
ngOnChanges
ngOnInit
ngOnDestroy
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
教程源代码及目录
如果您觉得本博客教程帮到了您,就赏颗星吧!
https://github.com/lewis617/angular2-tutorial
angular2系列教程(三)components的更多相关文章
- angular2系列教程(一)hello world
今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法. 例子 这个例子非常简单,是个双向数据绑定.我使用了官网 ...
- angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
- CRL快速开发框架系列教程三(更新数据)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- Android Studio系列教程三--快捷键
Android Studio系列教程三--快捷键 2014 年 12 月 09 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang.com/ ...
- NGUI系列教程三
接下来我们再来看Progress Bar和Slider,对比参数我们可以发现,Progress Bar和slider的明显区别在于slider多一个Thumb选项,这里的Thumb就是我们拖动的时候点 ...
- 黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级) 企业库验证应用程序模块之配置文件模式: ...
- 黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级)
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (初级) 企业库提供了一个很强大的验证应用程序模 ...
- Fastify 系列教程三 (验证、序列化和生命周期)
Fastify 系列教程: Fastify 系列教程一 (路由和日志) Fastify 系列教程二 (中间件.钩子函数和装饰器) Fastify 系列教程三 (验证.序列化和生命周期) 验证 Fast ...
- webpack4 系列教程(三): 多页面解决方案--提取公共代码
这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...
- WPF系列教程——(三)使用Win10 Edge浏览器内核 - 简书
原文:WPF系列教程--(三)使用Win10 Edge浏览器内核 - 简书 在需要显示一些 H5网站的时候自带的WebBrowser总是显示不了,WebBrowser使用的是IE内核,许多H5新特性都 ...
随机推荐
- NoSql数据库使用半年后在设计上面的一些心得
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- C#多线程之线程同步篇3
在上一篇C#多线程之线程同步篇2中,我们主要学习了AutoResetEvent构造.ManualResetEventSlim构造和CountdownEvent构造,在这一篇中,我们将学习Barrier ...
- 算法与数据结构(十四) 堆排序 (Swift 3.0版)
上篇博客主要讲了冒泡排序.插入排序.希尔排序以及选择排序.本篇博客就来讲一下堆排序(Heap Sort).看到堆排序这个名字我们就应该知道这种排序方式的特点,就是利用堆来讲我们的序列进行排序.&quo ...
- 操作系统篇-分段机制与GDT|LDT
|| 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.前言 在<操作系统篇-浅谈实模式与保护模式>中提到了两种模式,我们说在操作系统中,其实大部分时间是待在保护模式中的. ...
- 深入理解 Java G1 垃圾收集器--转
原文地址:http://blog.jobbole.com/109170/?utm_source=hao.jobbole.com&utm_medium=relatedArticle 本文首先简单 ...
- 破解SQLServer for Linux预览版的3.5GB内存限制 (UBUNTU篇)
在上一篇中我提到了如何破解RHEL上SQLServer的内存大小限制,但是Ubuntu上还有一道检查 这篇我将会讲解如何在3.5GB以下内存的Ubuntu中安装和运行SQLServer for Lin ...
- ES6之let命令详解
let与块级作用域 { var foo='foo'; let bar='bar'; } console.log(foo,'var'); //foo varconsole.log(bar ,'bar') ...
- Win10提示没有权限使用网络资源问题解决
借鉴链接:http://www.cr173.com/html/67361_1.html Win10提示没有权限使用网络资源解决方法 1.打开控制面板; 2.在所有控制面板项中找到凭据管理器; 3.添加 ...
- 跟着老男孩教育学Python开发【第一篇】:初识Python
Python简介 Python前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...
- Linux下用netstat查看网络状态、端口状态(转)
转:http://blog.csdn.net/guodongdongnumber1/article/details/11383019 在linux一般使用netstat 来查看系统端口使用情况步. ...