angular 2 - 如何为组件包含 javascript？答案

【问题标题】：angular 2 - How do you include javascript for a component?angular 2 - 如何为组件包含 javascript？
【发布时间】：2016-11-09 04:07:41
【问题描述】：

我是 Angular 的新手，我直接从 Angular 2 开始。Angular 的一大优点是我可以模块化网页的每个功能。组件有自己的 html 和样式表。

但是他们自己的 javascript 文件呢？如何包含其自己的特定 javascript 文件？我已经看到这个 SO question 是唯一可用的方法是使用 SystemJS 吗？

例如，假设一个组件使用 Google Maps API 或一个组件使用图表库，这是如何处理的？

【问题讨论】：

标签： javascript angular

【解决方案1】：

我正在使用 facebook sdk，如下所示

FacebookService.ts 修改自 https://github.com/zyramedia/ng2-facebook-sdk。 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);
    });
}

【讨论】：

如果我没有 .ts 文件怎么办？
我们可以创建一个组件或指令来加载外部脚本，例如在 AppendScript 组件中，我们可以将脚本附加到页面并根据 id 进行处理

【解决方案2】：

一般来说，您的应用（模块）被认为具有一组全局依赖项。处理此问题的方法是将所有依赖项包含在您的任何应用程序文件之前。

在您的示例中，您的 index.html 将在包含主应用程序的任何组件之前包含地图 Javascript 和图表 Javascript。

【讨论】：