Angular 2 with Third Party files

來紀錄一下最近遇到的一些小問題

用新的工具就是踩坑加上撞牆

對於在typescript上面使用外部的模組就是會有許許多多的狀況以及需要適應的地方

拿剛剛做的小東西來說明好了

import { Component, OnInit, ElementRef, Inject, AfterViewInit } from '@angular/core';

declare let jQuery: any;

@Component({
    ...
})
export class test implements OnInit, AfterViewInit{
    elementRef : ElementRef;
    logs = new Array();

    constructor(
        @Inject(ElementRef) elementRef:ElementRef) {
        this.elementRef = elementRef;
     }
    ngOnInit() {
        let $button = jQuery(this.elementRef.nativeElement).find(".btn");
        $button.click(()=>{

            let log = jQuery(this).attr('log');

            ...


            logPush(log);
            function logPush(log){
                this.logs.push(log);
            }
        })

    }
}

這只是一個簡易的示範使用jquery來實做button當被點擊到的時候進行處理

當然在ng2有提供(click)="onClick()"的binding可以使用

不過我每一個按鈕都添上一個binding而且是重複的東西我不是很喜歡 加上按鈕又很多的時候

好吧  這不是重點

重點是...這段code是錯誤的

在click裡面的callback使用lambda function 會出問題

這裡面用的this不是指向點擊到的button, 會變成是class test這支裡面Component的東西

最後的log.push會無法運作,因為是處於undefined狀態下

ok發現問題點了

在原本使用$.click是會針對指定的選項綁定新增的function  使其可以執行

可是在現在這樣寫會錯誤,那要該怎辦呢...

以下是我的解法

    ngOnInit() {
        let $button = jQuery(this.elementRef.nativeElement).find(".btn");

        $button.click(function(){
            let log = jQuery(this).attr('log');

            ...


            logPush(log);
            function logPush(log){
                this.logs.push(log);
            }
        })
    }

好了, 下個console.log給了log,出來是我需要的

But!!!!logPush的this.log跳出type:error的錯誤

摁.....好吧,this的對應的對象換了,自然就不是我所想的那樣啦

於是最後版本如下

    ngOnInit() {
        let $button = jQuery(this.elementRef.nativeElement).find(".btn");
        let major = this;

        $button.click(function(){
            let log = jQuery(this).attr('log');

            ...


            logPush(log);
            function logPush(log){
                major.logs.push(log);
            }
        })
    }

OK 可以work了  搞定收工