如何在 Angular 4 中添加社交分享按钮答案

【问题标题】：how to add social share button in angular 4如何在 Angular 4 中添加社交分享按钮
【发布时间】：2018-08-06 21:10:16
【问题描述】：

我已运行命令“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：类型参数 '{ 选择器：字符串；模板网址：字符串； styleUrls: 字符串[];指令：typeof CeiboShare[]； }' 不可分配给“组件”类型的参数。对象字面量只能指定已知属性，而“组件”类型中不存在“指令”。

日期：2018-02-27T09:02:42.288Z - 哈希：bedb972b22f9a72ebb59 - 时间：2832ms 5个不变的块 chunk {main} main.bundle.js (main) 367 kB [initial] [rendered]

webpack：编译成功。

【问题讨论】：

你能分享一些代码吗？
你不需要在组件级别包含指令，你只需要在你的模块的导入部分中导入它
如果我删除指令。仍然感到困惑我下一步应该做什么来将社交分享整合到我的组件中

标签： html angular

【解决方案1】：

您的简单方法是像这样在您的 app.modules.ts 中导入 1) 从 'ng2-social-share' 导入 {CeiboShare}；

@NgModule({

声明：[ 应用组件，赛博股份 ] })

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

如果你想这样，你只需要定义 url 共享链接和图像 url 共享：

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

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

在您的 home.component.html 中，您可以像这样轻松调用共享

按钮 ceiboShare [facebook]="{u: repoUrl}">Facebook 领英谷歌加推特兴趣爱好
一切正常

【讨论】：

您不能使用 ng2-social-share，因为问题在于包在构建 Angular 版本大于 2 的项目期间不受支持，因为指令不再是组件装饰器的一部分，即使您在模块声明中声明它，然后您的应用程序支持本地包，但是当您构建应用程序以进行生产时，您最终会遇到错误。

【解决方案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');
  }

希望这会对您或其他人有所帮助。谢谢！

【讨论】：

【解决方案3】：

从@component 装饰器中删除directives : [CeiboShare]。 Angular 4 不支持它，您甚至不需要将它导入到您的组件中。只需导入到 Ngmodule 中，如下所示，

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

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

这足以让它在任何组件中作为属性指令工作。

【讨论】：