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

Posted 2023-02-23

【中文标题】如何在 Angular 4 中添加社交分享按钮

【英文标题】：how to add social share button in 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：编译成功。

【问题讨论】：

你能分享一些代码吗？

你不需要在组件级别包含指令，你只需要在你的模块的导入部分中导入它

如果我删除指令。仍然感到困惑我下一步应该做什么来将社交分享整合到我的组件中

【参考方案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()
 ]
);

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