Angular2 备忘

ng serve --port 80 --disable-host-check  启动80端口，禁用host检查

 

要在 component 内绑定全局事件的话，可以使用 @HostListener, 它会随着 component destroy 而 unbind, 很方便的哦.

export class StoogesAppComponent implements OnInit {
  @HostListener('document:click', ['$event'])
  private documentClick(event: Event) {
    this.globalClicked$.emit(null);
  }

　　@HostListener('window:resize', ['$event'])

　　　　onResize(event) {

　　　　console.log(event.target.innerWidth);

　　}

 }

 

image src biding 404 注意事项

<img [src]="data" >

data = "" 就不会去加载图片( undefined, null 也是去加载哦 ), 其余情况下，模板一旦渲染就会马上去加载. 

好的处理就是写个 ngIf 等待 async data 回来才渲染图片. 

 

ng 上写 keyCode 事件

<input 
    (keydown.arrowUp)="$event.preventDefault()"
    (keydown.shift.tab)="$event.preventDefault()"                            
    type="text"  />

看的出就是把 keyCode.key 写成驼峰式就可以监听到了. 配合 shift 也很容易写哦.

 

模板中如果有引用对象属性，但是对象是 null 时, 会报错哦. 可以使用 ?. 来处理，这个和 c# 6.0 语法一样

<div>{{ someObj?.value }}</div> 

 

文件上传，Upload file *（没有试过，有时间试试，原先用的别人封装了一层的fileUploader）

<input type="file" (change)="onFileChanged($event.target.files)" placeholder="Upload file" accept="image/*">

onFileChanged(fileList: FileList) {
    if (fileList.length > 0) {
        let file: File = fileList[0];
        let formData: FormData = new FormData();
        formData.append('uploadFile', file, file.name);            
        let headers = new Headers({ 
            "Accept": "application/json"
        });
        let options = new RequestOptions({ headers });
        this.http.post("https://localhost:44372/api/uploadFile", formData, options)
            .map(res => res.json())
            .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success' + data),
                error => console.log(error)
            )
    }
}

ng 支持 formData, 关键就是别自己去写 Content-Type header, ng 会帮我们写好的.

 

路由获取 params ( params 是 Matrix Url 和 :Id , 要拿 search 的话用 queryParams )

class TestComponent implements OnInit, OnDestroy {
    //home/xx
    private sub : Subscription;
    constructor(private route: ActivatedRoute) { }    
    ngOnInit()
    {
        //监听变化
        this.sub = this.route.params.subscribe(params => {
            console.log(params); //{ id : "xx" }
        });
        //如果只是要 get 一次 value, 用快照
        console.log(this.route.snapshot.params); //{ id : "xx" } //this.route.snapshot.queryParams["xxx"];

} ngOnDestroy() { this.sub.unsubscribe(); //记得要取消订阅, 防止内存泄露 (更新 : 其实 ActivatedRoute 可以不需要 unsubscribe，这一个 ng 会智能处理，不过养成取消订阅的习惯也是很好的) } }

 

Router :ActivateRoute :Route 

1.Router : 用于 redirect 操作

2.ActivateRoute : 用于获取 data, params 等等

3.Route : 就是我们每次注册时写的资料, 里面有 data, path 

 

文件拖拽上传测试：

angular drag & drop 如果不要使用 plugin 的话, 可以用最基本的写法

可以参考原生 html 的例子 : http://www.w3schools.com/html/html5_draganddrop.asp

复制代码
<form [formGroup]="form" submitableForm>
<s-upload #imagesUpload [config]="uploadConfig" formControlName="images"></s-upload>
<div *ngFor="let fileData of imagesUpload.fileDatas"
draggable="true"
(dragstart)="imagesUpload.dragingFileData = fileData"
(dragend)="imagesUpload.dragingFileData = null"
(dragenter)="imagesUpload.dragingFileData && imagesUpload.moveFileData(fileData,imagesUpload.dragingFileData)"
[sDragover]="imagesUpload.dragingFileData"
class="uploadImage">
<img [src]="fileData.file" width="100px">
<i [show]="fileData.loading" class="fa fa-spin fa-spinner loading"></i>
<i (click)="imagesUpload.removeFileData(fileData)" [show]="!fileData.loading" class="fa fa-times close"></i>
</div>
</form>
复制代码
dragingFileData 用于缓存变量

(dragend) 清楚缓存, 缓存还有一个重要用途就是如果你有 2 个 upload file 的时候不允许它们 cross drag

之所以不直接使用 (dragover) 是因为它会一次触发 digest (性能优化), sDragover 是一个指令里面手动添加了 event, 这样就不会一直 digest 了.