angular 2 - 如何爲組件包含JavaScript？

我對Angular完全陌生，而且我直接開始使用Angular 2. Angular的一個優點是我可以模塊化網頁的每個功能。組件有自己的html和樣式表。angular 2 - 如何爲組件包含JavaScript？

但是他們自己的JavaScript文件呢？我怎樣才能包括它自己的特定JavaScript文件？我看過這個SO question是唯一可用的方法是使用SystemJS？

例如，假設一個組件使用Google Maps API或一個組件使用圖表庫，那麼如何處理？

來源

2016-11-09 ng.newbie

通常，您的應用程序（模塊）被認爲具有一組全局依賴項。處理這個問題的方法是在您的任何應用程序文件之前包含所有依賴項。

以您的示例爲例，您的index.html將在包含主應用程序的任何組件之前包含地圖Javascript和圖表Javascript。

來源

2016-11-09 04:26:39

我使用Facebook的SDK像下面從https://github.com/zyramedia/ng2-facebook-sdk修改

FacebookService.ts。 FacebookService文件是局部的，不是粘貼完整的文件

分析appendFacebook方法在全球範圍內加載外部腳本，但是當組件需要，一旦再裝外部腳本，我們將不會加載它再次爲我們正在檢查腳本的ID，我們調用

@Injectable() 
export class FacebookService { 

    /** 
    * This method is used to initialize and setup the SDK. 
    * @param params 
    */ 
    init(params: FacebookInitParams): Observable<any> { 
     return new Observable(observer => { 
      if (!window['fbAsyncInit']) { 
       this.appendFacebook(); 
       window['fbAsyncInit'] = function() { 
        FB.init(params); 
        observer.next('FB initialized'); 
        observer.complete(); 
       }; 
      } else { 
       observer.next('FB initialized'); 
       observer.complete(); 
      } 
     }); 

    } 

    appendFacebook() { 
     var js, 
     id = 'facebook-jssdk', 
     ref = document.getElementsByTagName('script')[0]; 

     if (document.getElementById(id)) { 
      return; 
     } 

     js = document.createElement('script'); 
     js.id = id; 
     js.async = true; 
     js.src = "//connect.facebook.net/en_US/sdk.js"; 

     ref.parentNode.insertBefore(js, ref); 
    } 
}

然後在component.ts文件

constructor(private facebookService: FacebookService) {} 

loginByFacebook() { 
    let facebookParams: FacebookInitParams = { 
     appId: environment.facebookAppId, 
     xfbml: true, 
     version: 'v2.7' 
    }; 

    let facebookSubscription = this.facebookService.init(facebookParams).mergeMap(data => { 
     return this.facebookService.login({scope: "public_profile,user_friends,email"}); 
    }).subscribe((response: FacebookLoginResponse) => { 
     console.log(response); 
    }, error => { 
     console.log(error); 
    }); 
}

來源

2016-11-09 07:01:23 Eswar

如果我沒有的.ts文件怎麼辦？ –

我們可以創建一個組件或指令來加載外部腳本，例如在AppendScript組件中，我們可以將腳本附加到頁面並基於id進行處理 – Eswar

angular 2 - 如何爲組件包含JavaScript？

回答

相關問題