LinkedinをAngular2に統合する方法

Question

私はLinkedIn Authenticationに関してAngular2の問題があります。エラーを投げる

import {Component , OnInit , NgZone} from 'angular2/core'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {ROUTER_DIRECTIVES , Router} from 'angular2/router'; 

declare var IN : any; 

@Component({ 
    directives : [ROUTER_DIRECTIVES], 
    selector : '.main', 
    providers : [HTTP_PROVIDERS], 
    templateUrl : './app/registration/employee.reg.html' 
}) 

export class EmployeeRegistrationComponent implements OnInit{ 

constructor(private zone : NgZone){ 
    this.zone.run(() => { 
     $.proxy(this.OnLinkedInFrameworkLoad, this); 
    }); 
} 

ngOnInit(){ 
    var linkedIn = document.createElement("script"); 
    linkedIn.type = "text/javascript"; 
    linkedIn.src = "http://platform.linkedin.com/in.js"; 
    linkedIn.innerHTML = "\n"+ 
     "api_key: **********\n" + 
     "authorize: true\n" + 
     "onLoad:" + this.OnLinkedInFrameworkLoad ; 
    document.head.appendChild(linkedIn); 

    var script = document.createElement("script"); 
    script.type = "in/Login"; 
    document.body.appendChild(script); 
} 

OnLinkedInFrameworkLoad =() => { 
    IN.Event.on(IN, "auth", this.OnLinkedInAuth); 
} 

OnLinkedInAuth =() => { 
    IN.API.Profile("me").result(result => this.ShowProfileData); 
} 

ShowProfileData(profiles) { 
    console.log(profiles); 
    var member = profiles.values[0]; 
    var id=member.id; 
    var firstName=member.firstName; 
    var lastName=member.lastName; 
    var photo=member.pictureUrl; 
    var headline=member.headline; 

    //use information captured above 
    } 

} 

コンソール：angular2-polyfills.js:1250 Uncaught Error: Could not execute 'function() {'. Please provide a valid function for callback.

私がやって何が間違っている私を助けてください...

Answer 1

私は、最初のスクリプトタグ内のソースコードの出力を調べることによって、問題を発見しました。あなたが置く場所

問題は、次のとおりです。

"onLoad:" + this.OnLinkedInFrameworkLoad; 

それはとして出力されます：

onLoad: function() {↵   IN.Event.on(IN, "auth", _this.OnLinkedInAuth);↵  } 

そして、それは公式の開発者に対し文書

重要で述べているように！

タグ内の引数間の改行は、他の形式のフィールドセパレータがないため重要です。レンダリングされたHTMLの空白を取り除くテンプレート言語またはコードミニファイアを使用している場合は、このタグ内の改行を保持するために例外を作成する必要があることに注意してください。そうしないと、正しく解析されません。

出典：https://developer.linkedin.com/docs/getting-started-js-sdk

---

私は角2とLinkedInのログインの問題を解決する方法をまだ見つけていないが、私は再び、これは私のために働いている

Answer 2

他のソリューションしようとします：

を

import { Component, OnInit, NgZone } from '@angular/core'; 

    export class RegistrationComponent implements OnInit{ 

constructor(private ngZone: NgZone) { 
     window['onLinkedInLoad'] =() => ngZone.run(() => this.onLinkedInLoad()); 
     window['displayProfiles'] = (profiles) => ngZone.run(() => this.displayProfiles(profiles)); 
     window['displayProfilesErrors'] = (error) => ngZone.run(() => this.displayProfilesErrors(error)); 
    } 

    ngOnInit() { 
       var linkedIn = document.createElement("script"); 
         linkedIn.type = "text/javascript"; 
         linkedIn.src = "http://platform.linkedin.com/in.js"; 
         linkedIn.innerHTML = "\n" + 
          "api_key: ****\n" + 
          "authorize: true\n" + 
          "onLoad: onLinkedInLoad\n"+ 
          "scope: r_basicprofile r_emailaddress"; 
         document.head.appendChild(linkedIn); 
         var script = document.createElement("script"); 
         script.type = "in/Login"; 
         document.body.appendChild(script); 
       } 

       public onLinkedInLoad() { 
         IN.Event.on(IN, "auth", this.onLinkedInProfile); 
       } 

       public onLinkedInProfile() { 
          IN.API.Profile("me") 
           .fields("id", "firstName", "lastName", "email-address") 
           .result(this.displayProfiles) 
           .error(this.displayProfilesErrors); 
       } 
       public displayProfiles(profiles) { 
        console.log(profiles); 
       } 
       public displayProfilesErrors(error) { 
         console.debug(error); 
       } 
       //Invoke login window with button 
       public liAuth() { 
        IN.User.authorize(function() { 
          console.log('authorize callback'); 
        }); 
       } 
      } 

Answer 3

javascriptのDOM機能を使用しているため、これを変更する必要があります：

これに

"onLoad:" + this.OnLinkedInFrameworkLoad ; 

：

"onLoad: onLinkedInLoad"; 

今すぐあなたのindex.htmlの<head>

<script type="text/javascript"> 

// Setup an event listener to make an API call once auth is complete 
function onLinkedInLoad() { 
    IN.Event.on(IN, "auth", getProfileData); 
} 

// Handle the successful return from the API call 
function onSuccess(data) { 
    console.log(data); 
} 

// Handle an error response from the API call 
function onError(error) { 
    console.log(error); 
} 

// Use the API call wrapper to request the member's basic profile data 
function getProfileData() { 
    IN.API.Raw("/people/~").result(onSuccess).error(onError); 
} 

</script>