TL; 博士

我將

目標

在我們的 Angular 12 應用程式中，我們希望在視頻下包含三件事：

• Facebook 點贊按鈕
• Facebook 分享按鈕
• Pinterest Pin 按鈕

我為每個組件創建了組件，它們觸發將腳本標簽寫入 DOM 以獲取 JS 庫（我們使用 NGXS 進行異步操作）。

facebook-share-button.component.ts

const SCRIPT_ID = 'facebook-share-button';

@Component(...)
export class FacebookShareButtonComponent implements AfterViewInit, OnDestroy {
  @Select((state) => state.router.state.fullUrl) fullUrl$: Observable<string>;

  constructor(private store: Store) {}

  ngAfterViewInit() {
    this.store.dispatch(
      new CoreActions.LoadScript(
        SCRIPT_ID,
        'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v12.0',
        { async: true }
      )
    );
  }

  ngOnDestroy() {
    this.store.dispatch(new CoreActions.RemoveScript(SCRIPT_ID));
  }
}

facebook-share-button.component.html

<div class="facebook-share-button">
  <div id="fb-root"></div>
  <div
    class="fb-share-button"
    [attr.data-href]="fullUrl$ | async"
    data-layout="button"
    data-size="large"
  ></div>
</div>

問題

Facebook Share Button 和 Pinterest Pin Button 作業得很好，只有 Facebook Like Button 不顯示。它的寬度和高度為 0px

完整代碼

facebook-like-button.component.ts

import { AfterViewInit, Component, OnDestroy } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Observable } from 'rxjs';
import { CoreActions } from 'src/app/core/core.actions';

const SCRIPT_ID = 'facebook-like-button';

@Component({
  selector: 'app-facebook-like-button',
  templateUrl: './facebook-like-button.component.html',
  styleUrls: ['./facebook-like-button.component.styl'],
})
export class FacebookLikeButtonComponent implements AfterViewInit, OnDestroy {
  @Select((state) => state.router.state.fullUrl) fullUrl$: Observable<string>;

  constructor(private store: Store) {}

  ngAfterViewInit() {
    this.store.dispatch(
      new CoreActions.LoadScript(
        SCRIPT_ID,
        'https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v12.0',
        { anonymous: true, nonce: '4j5id3DJ' }
      )
    );
  }

  ngOnDestroy() {
    this.store.dispatch(new CoreActions.RemoveScript(SCRIPT_ID));
  }
}

facebook-like-button.component.html

<div class="facebook-like-button">
  <div id="fb-root"></div>
  <div
    class="fb-like"
    [attr.data-href]="fullUrl$ | async"
    data-width="77"
    data-layout="standard"
    data-action="like"
    data-size="large"
    data-share="false"
  ></div>
</div>

Things I tried

1. Removing the facebook-share-button Component (maybe the two scripts are interfering)
2. Placing the code in ngOnInit() (instead of ngAfterViewInit())
3. Setting a static data-href Attribute (i.e. removing the async-Pipe)
4. Removing <div id="fb-root"></div> in facebook-share-button.component.html or facebook-like-button.component.html or both
5. Moving <div id="fb-root"></div> to app.component.html
6. Playing around with the options of .fb-like and removing them one by one
7. Setting async, defer and crossorigin to different values in the script tag
8. Other browsers and deactivating AdBlockers
9. Manually include the script tags
10. Search on Stackoverflow for people with simlar problems
11. And a combination of all of the above

but nothing worked.

In the end, I included the exact code that

標籤：

上一篇：EditText.setHint在它有內容時不起作用

下一篇：Facebook的除錯器顯示預覽影像，但在Facebook上它沒有拉入相同的預覽影像？