1.js事件与angular2事件映射
- onfocus - mouseenter
- onmouseout - mouseleave
- onkeyup - keyup
在typescript的lib.dom.d.ts 的11921行 interface WindowEventMap extends GlobalEventHandlersEventMap 内包含详细的事件映射。
2.接口实现
接口不一定非要在类名后面implements 声明,只需要实现或不实现即可。
3.类同名冲突问题。
加入有连个相同的文件相同的类,存在于不同的文件夹中,我们在组件中引入时为防止冲突,可以指定别名来解决问题。
import { AClass as BClass } from './..';
后面即可用BClass来替代AClass来使用。
4.set关键字
有时有我们会碰见set关键字,但是不知道他是干嘛的。因为我之前是做.net开发的,对于set和get有接触,所以理解起来容易一些,但是这里还是记录一下,多写一点东西总是不会错的。
先来看一个例子
@Input set defalutColor(colorName: string){
this._defaultColor = colorName;
}
这里的set 其实表明公有属性defalutColor是可写的,他内部返回了私有属性_defaultColor,在类的内部,我们都用这个私有属性,然后使没有下划线的defalutColor来暴露出去,供外部调用。
设置成set,那就只能写,不能读。
5.@Input()
在ng2的代码中我们经常能看到@Input(),它提供了指令间的数据传递功能。
把它在接收数据的指令类中定义。
有时它是这样的
@Input() hero;
有时,又是这样的
@Input('hero') myHero:Hero;
这里讲一下有什么不同
第一种,外部传入的时候标识符是hero,传进来后标识符不变,依然是hero;
第二种,外部传入的时候标识符是hero,传进来后我们想给它起一个别名myHero。
这样就很清晰了,以后遇到也不会困惑两种写法有什么门道了。
6.元数据metadata
在angular中,组件、指令、服务等都是类,并没有ng2的特性。而我们用@装饰器来装饰这个类,并且在装饰器中向这个类传入了元数据,angular就认识到这个类是一个组件、指令。。
7.封装桶
封装桶是把多个模块的导出结果汇总到单一的 ES2015 模块的一种方式。 封装桶本身是一个 ES2015 模块文件,它重新导出选中的导出,这些导入来自其它 ES2015 模块。举个栗子
设想在heroes目录下有三个 ES2015 模块:
// heroes/hero.component.ts
export class HeroComponent {}
// heroes/hero.model.ts
export class Hero {}
// heroes/hero.service.ts
export class HeroService {}
如果没有封装桶,消费者需要三条导入语句:
import { HeroComponent } from '../heroes/hero.component.ts';
import { Hero } from '../heroes/hero.model.ts';
import { HeroService } from '../heroes/hero.service.ts';
在heroes目录下添加一个封装桶(按约定叫做index),它导出所有这三项:
export * from './hero.model.ts'; // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
export { HeroComponent } from './hero.component.ts'; // re-export the named thing
现在,消费者就就可以从这个封装桶中导入它需要的东西了。
import { Hero, HeroService } from '../heroes'; // index is implied
Angular 的每个范围化包 (scoped package) 都有一个名为index的封装桶。