1
私は、Typescriptを使ってAngular 2でアプリを作っています。私はFacebookのプラグインのいくつかをページに実装しました。今、私がページをロード/リロードすると、ロードが遅くなり、ロードが完了してからしばらく時間がかかります。彼らは部品を積みます...そうです。 Facebookページのプラグインはヘッダーを最初に表示し、次にプラグインの残りの部分などを表示します。それは私の意見では醜いようです。彼らが完全にロードされた後にリスナーを作り、見せる方法はありますか？ここFacebookのプラグインがロードされた後に表示する
コード（FacebookのjavascriptSDKとのindex.html）である：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BLOG OLIFFFFFFKA</title>
<base href="/">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Prompt:300,200' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="http://localhost/OliwkaFinal/back/Images/default/favicon.png">
</head>
<body>
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.7&appId=1025977917520637";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<app-root><img class="loading-image" src="http://localhost/OliwkaFinal/back/Images/default/loading.gif"></app-root>
</body>
</html>
及び例えば私はこの1つのようなものを考えていた
<router-outlet></router-outlet>
<div id="facebook-page-container" *ngIf="!fanpageClosed">
<a (click)="closeFacebookFanpage()" class="pointer facebook-close-link"><span class="glyphicon glyphicon-remove"></span></a>
<div class="fb-page"
data-href="https://www.facebook.com/oliffffffka/"
data-tabs="timeline"
data-width="250"
data-height="420"
data-small-header="true"
data-adapt-container-width="true"
data-hide-cover="true"
data-show-facepile="true">
<blockquote cite="https://www.facebook.com/oliffffffka/" class="fb-xfbml-parse-ignore">
<a href="https://www.facebook.com/oliffffffka/">Oliffffffka</a>
</blockquote>
</div>
</div>
：（Facebookのページのプラグインを持っている）app.component.ts
facebookLoaded = false;
constructor(private _fbService: FacebookService) {}
ngOnInit(){
this._fbService.loaded().subscribe(
response => {
if(response[state] == "loaded") { // OR true or whatever...
this.facebookLoaded = true;
}
}
);
}
と私のFacebookのプラグインタグの*ngIf="facebookLoaded"とHTMLでそれを実装します。これと同じ方法またはこれを行う方法はありますか？
ありがとうございます。 Facebookの開発者site
var finished_rendering = function() {
console.log("finished rendering plugins");
}
// In your onload handler
FB.Event.subscribe('xfbml.render', finished_rendering);
とFacebookのプラグインのHTMLからの
CSSは期待通りに機能しませんが、購読者はうまく機能しました。ありがとうございました！ –