angular2系统学习 ------杂项

1.js事件与angular2事件映射

1. onfocus - mouseenter
2. onmouseout - mouseleave
3. 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的封装桶。