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

Question

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

但是他们自己的 javascript 文件呢？我怎样才能包含它自己的特定 javascript 文件？我看过这个 SO question唯一可用的方法是使用 SystemJS 吗？

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

Answer 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);
    });
}