今天,我们要讲的是ng2的Components。
例子
这个例子是个老外写的,我将其迁移到ng2 beta版本,想了解迁移的同学可以参考我的做法。
消失的控制器
ng2的组件就是ng1中的指令。它包含模板、样式、注入、和选择器。
组件嵌套组件可以实现类似react的模块化,我曾经也用ng1做过类似的事情
我当时就想,既然有了指令(ng1)还要什么控制器(ng1)啊!果不其然ng2中移除了控制器,直接用指令也就是ng2的组件来展示界面:
app/navbar.ts
1 | import { Component} from 'angular2/core'; |
当组件被实例化后,ng2为这个组件创建了一个shadow DOM(Shadow DOM在一个web组件中提供了js,css,template的封装),然后模板和样式被注入进去。
这段代码做了这些事情:
- 设置选择器
- 设置
directives
为[ngFor]
- 设置样式
- 设置模板
- 填写类的成员变量
items
- 在构造函数中给
items
添加数据 - 在生命周期的钩子
ngOnInit
中打印信息
我们的组件就写好了。
组件的嵌套
写好组件后,我们如何将这个组件放在app
组件中呢?答案是directives
。这里设计得没有react好,react的组件是可以直接用的,ng2的组件则需要以指令的身份注入,因为组件实质也是指令:
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