可以通过以下步骤实现:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
cookie : true,
xfbml : true,
version : 'v12.0'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
请注意将YOUR_APP_ID
替换为您的Facebook应用程序的实际应用程序ID。
NgZone
和DOCUMENT
:import { Component, NgZone, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-facebook',
template: `
<button (click)="loginWithFacebook()">Login with Facebook</button>
`
})
export class FacebookComponent {
constructor(private ngZone: NgZone, @Inject(DOCUMENT) private document: Document) {}
loginWithFacebook() {
this.ngZone.runOutsideAngular(() => {
// 在这里使用Facebook SDK的功能
FB.login((response) => {
this.ngZone.run(() => {
// 处理登录响应
});
}, { scope: 'email' });
});
}
}
在上面的示例中,我们使用FB.login
方法来触发Facebook登录流程,并在登录成功后处理响应。
请注意,我们使用ngZone.runOutsideAngular
和ngZone.run
来确保在Angular的变更检测之外执行Facebook SDK的功能,并在完成后重新进入Angular的上下文。
领取专属 10元无门槛券
手把手带您无忧上云