angular2学习使用心得

脚手架：https://github.com/AngularClass/angular-starter

npm下载插件失败的解决方法： 1)用yarn安装下载失败的插件，先npm -i yarn安装yarn 2）使用cnpm，参考https://cnpmjs.org/ ,命令几乎全部和npm一致，只是以cnpm代替了npm 3)

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

改回去的话 npm config set registry http://registry.npmjs.org

需要掌握的知识点

TypeScript https://www.tslang.cn/docs/home.html

Rxjs http://reactivex.io/rxjs/ 项目中用到的主要是Subject作为observable subscribe unsubscribe，flatMap,以及combineLatest

Immutable.js

Webpack（前期脚手架框架已经配置好了，不需要学习掌握）

Angular2 https://angular.cn/docs/ts/latest/

从Angular1转Angular2要注意的一些点，html的表达式中|| &&等左右一定要留空格

*ngFor="let item of array"

*ngIf

(click)=

(dblclick)= 双击，但是会触发(click)事件，如果要同时click和double click处理不同的事件，建议用click的时间间隔来实现double click

(blur)= (focus)=

[hidden]=

[(ngModel)]= 双向绑定的括号不能少但也可以用[ngModel] + (ngModelChange)来实现双向绑定

父子控件相互通信，子控件@Input()注解变量接受父视图的变量，@OutPut() EventEmiiter将值和事件传递给父控件

父组件中：
< child-item [namestr] = “fatherItemName”(childEvent)="fatherFunction(event)" #child>
@ViewChild(ChildComponent) child: ChildComponent; //另外一种父视图访问子控件的方式

child.nativeElement就相当于页面上的元素
子组件
@Input() namestr
@Output() childEvent = new EventEmitter<boolean>();
childEvent.emit(Object)

有很多的Angular2组件 https://github.com/AngularClass/awesome-angular

项目中用到的有：ng2-paginator分页组件

一些代码

在通用服务common-data-service中

public myNoticeSource = new Subject<any>();
public myNoticeSource$ = this.myNoticeSource.asObservable();

public myNotice(data) {
this.myNoticeSource.next(data);
}

在页面中

public mySub: any;
public ngOnInit() {
this.mySub = this.cds.myNoticeSource$.subscribe((data) => {
...
});
}
public ngOnDestroy() {
this.mySub.unsubscribe();
}

一些思路

需求：路径参数变更刷新页面内容

思路一，监听路由数据

this.router.events
.filter(event => event instanceof NavigationEnd)
.map(() => this.route) // 将filter处理后的Observable再次处理
.subscribe((event) => {
this.projectType = this.route.snapshot.params.projectType;
...清空数据
...请求数据1
...请求数据2
});

思路二，用官网的switchMap，按照官网的说法是这种写法有一个好处就是如果参数变更以后上一次的请求如果没有结束会被取消

this.route.params
.switchMap((params: Params) => {
this.projectType = +params['projectType'];
...清空数据

return Observable.combineLatest(
...api1,
...api2
);
}).subscribe((res) => {
if (res[0].meta.code === 200) {
...api1数据处理
} else {
this.cs.responseErrorHandler(res[0], false, this.router);
}
if (res[1].meta.code === 200) {
...api2数据处理
} else {
this.cs.responseErrorHandler(res[1], false, this.router);
}
});

需求：子控件失焦后关闭

思路一：让子控件的最外层div聚焦，然后在子控件最外层div上(blur)="active=false"

思路二：监听全局点击事件，如果target不是子控件中的任何一个元素，则active=false

import { Component, Input, Output, EventEmitter, OnInit, HostListener, ElementRef } from '@angular/core';
@HostListener('document:click', ['$event']) handleClick(event: Event) {
if (!this.el.nativeElement.contains(event.target)) {
this.active = false;
}
}

遇到过的问题

1）hashingTypeError: Data must be a string or a buffer

新写了一个模块，叫做应用服务，我取名ApplicationServiceModule和ApplicationServiceComponent，编译一直报错通过不了，网上有人说在index.ts中使用 export * from 来替代 export {moduleName} from的写法，但是解决不了我的问题，最后重命名为AppServiceModule和AppServiceComponent问题解决了，但是angular组件中也没有看到哪里有ApplicationServiceModule只有一个ApplicationModule，总之感觉怪怪的

angular2学习使用心得

猜你喜欢