如何在 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()
 ]
});

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