如何在 Angular 4 中添加社交分享按鈕

Question

我運行了命令“npm install --save ng2-social-share”。

然后添加到 app.module.ts:-

import { CeiboShare } from 'ng2-social-share';

@NgModule({
  imports: [
    CeiboShare
  ]
});

然后我添加到我的 home.component.ts:-

import { CeiboShare } from 'ng2-social-share';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  directives: [CeiboShare]
})

webpack：編譯... src/app/home/home.component.ts(16,3) 中的錯誤：錯誤 TS2345：類型為“{ 選擇器：字符串； 模板網址：字符串； 樣式網址：字符串[]； 指令：typeof CeiboShare[]； }' 不可分配給類型為“組件”的參數。 對象字面量只能指定已知屬性，並且“指令”不存在於“組件”類型中。

日期：2018-02-27T09:02:42.288Z - 哈希：bedb972b22f9a72ebb59 - 時間：2832 毫秒 5 個不變塊 {main} main.bundle.js (main) 367 kB [初始] [渲染]

webpack：編譯成功。

Answer 1

簡單的方法是像這樣導入 app.modules.ts 1) import {CeiboShare} from 'ng2-social-share';

@NgModule({

聲明：[ AppComponent, CeiboShare ] })

2) 然后在你的 home.component.ts

如果你想要這樣，你只需要定義 url 共享鏈接和圖像 url 共享：

//vars used only for example, put anything you want :)

public repoUrl = ' https://www.egozola.com '; public imageUrl = 'https://avatars2.githubusercontent.com/u/10674541?v=3&s=200 ';

3. 在你的 home.component.html 中，你可以像這樣輕松地調用共享

   按鈕 ceiboShare [facebook]="{u: repoUrl}">Facebook Linkedin Google Plus Twitter Pinterest

4. 一切都很好

Answer 2

你可以做的是在你的打字稿文件上使用這些函數並從模板中調用它。

此處提供 5 個社交媒體分享- Facebook、Pinterest、Twitter、GooglePlus、LinkedIn

  // Facebook share won't work if your shareUrl is localhost:port/abc, it should be genuine deployed url 
  shareOnFacebook(shareUrl: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`, 'sharer');
  }

  shareOnPinterest(shareUrl: string, img: string, desc: string) {
    shareUrl = encodeURIComponent(shareUrl);
    img = encodeURIComponent(img);
    desc = encodeURIComponent(desc);
    window.open(`https://www.pinterest.com/pin/create/button?url=${shareUrl}&media=${img}&description=${desc}`, 'sharer');
  }

  shareOnTwitter(shareUrl: string, desc: string) {
    shareUrl = encodeURIComponent(shareUrl);
    desc = encodeURIComponent(desc);
    window.open(`https://twitter.com/intent/tweet?url=${shareUrl}&text=${desc}`, 'sharer');
  }

  shareOnGooglePlus(shareUrl: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://plus.google.com/share?url=${shareUrl}`, 'sharer');
  }
  
  // LinkedIn share won't work if your shareUrl is localhost:port/abc, it should be genuine deployed url
  shareOnLinkedIn(shareUrl: string, title: string, summary: string) {
    shareUrl = encodeURIComponent(shareUrl);
    window.open(`https://www.linkedin.com/shareArticle?url=${shareUrl}&title=${title}&summary=${summary}`, 'sharer');
  }

希望這會對您或其他人有所幫助。 謝謝！

Answer 3

從@component 裝飾器中刪除directives: [CeiboShare] 。 Angular 4 不支持它，你甚至不需要將它導入到你的組件中。 只需按如下方式導入 Ngmodule，

import { CeiboShare } from 'ng2-social-share';

@NgModule({
 imports: [
  CeiboShare.forRoot()
 ]
});

這足以讓它在任何組件中作為屬性指令工作。