Angular 10 ngx-sharebuttons 中的社交分享按钮答案

【问题标题】：social share button in angular 10 ngx-sharebuttonsAngular 10 ngx-sharebuttons 中的社交分享按钮
【发布时间】：2021-02-27 09:00:01
【问题描述】：

我正在为 facebook、whatsapp 等社交分享按钮实现 ngx-sharebuttons。

这是我尝试过的

安装包

npm i cdk
npm i ngx-sharebuttons
npm i @fortawesome/fontawesome-svg-core @fortawesome/angular-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';

 ShareButtonsModule.withConfig({
      debug: true
    }),
    ShareIconsModule

<share-buttons [theme]="'material-dark'"
[include]="['facebook','twitter','linkedin','pinterest','reddit','mix','vk','telegram','messenger','whatsapp','xing','line','sms','email','copy']"
[show]="9"
[size]="1"
[url]="'https://www.eduforbetterment.com/generate-qr-code-in-angular/'"
[image] ="'https://www.eduforbetterment.com/wp-content/uploads/2020/08/qrcode.jpg'"
[autoSetMeta]="false"
></share-buttons>

一切正常，但我看不到要分享的社交图标，如 facebook、twitter、whatsapp 等。

我关注了这个link

正如您在图像中看到的共享按钮正在创建但图标没有创建。

下面是我的 package.json 文件

"@angular-devkit/core": "10.0.1",
    "@angular/animations": "^10.0.2",
    "@angular/cdk": "^11.0.0",
    "@angular/cli": "^10.0.1",
    "@angular/common": "10.0.2",
    "@angular/compiler": "10.0.2",
    "@angular/core": "10.0.2",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "10.0.2",
    "@angular/localize": "^10.0.2",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "10.0.2",
    "@angular/platform-browser-dynamic": "10.0.2",
    "@angular/router": "10.0.2",
    "@fortawesome/angular-fontawesome": "^0.8.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "bootstrap": "^4.5.2",
    "chartist": "^0.11.4",
    "core-js": "^2.6.11",
    "hammerjs": "^2.0.8",
    "ng-chartist": "4.1.0",
    "ngx-sharebuttons": "^8.0.4",
    "ngx-spinner": "^10.0.1",
    "node-sass": "^4.13.1",
    "rxjs": "^6.6.0",
    "rxjs-compat": "^6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"

请帮助我哪里做错了。

【问题讨论】：

标签： facebook icons whatsapp angular10 share-button

【解决方案1】：

试试这个

[shareButton] 是将其宿主元素转换为共享按钮的指令。

https://ngx-sharebuttons.netlify.app/#/share-button-directive

【讨论】：

【解决方案2】：

我改用了 fontawesome 图标（你导入你需要的东西）

import { faFacebookF, faTwitter } from '@fortawesome/free-brands-svg-icons';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
constructor(
    iconLibrary: FaIconLibrary,
  ) {
    iconLibrary.addIcons(faTwitter, faFacebookF);
  }

【讨论】：