Question

我是Angular的新手，我已经直接开始使用Angular 2. Angular的一个很好的事情是我可以模块化我的网页的每个功能。组件有自己的html和样式表。

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

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

Answer 1

我正在使用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);
    });
}

Answer 2

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

通过您的示例，您的index.html将包含地图Javascript和图表Javascript，然后才包含主应用程序的任何组件。

angular 2 - 如何为组件添加javascript？

2 个答案: