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？

回答

相关问题