[英]how to add social share button in angular 4
I have run the command "npm install --save ng2-social-share".我运行了命令“npm install --save ng2-social-share”。
and then add into app.module.ts:-然后添加到 app.module.ts:-
import { CeiboShare } from 'ng2-social-share';
@NgModule({
imports: [
CeiboShare
]
});
and then i add into my home.component.ts:-然后我添加到我的 home.component.ts:-
import { CeiboShare } from 'ng2-social-share';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
directives: [CeiboShare]
})
webpack: Compiling... ERROR in src/app/home/home.component.ts(16,3): error TS2345: Argument of type '{ selector: string; webpack:编译... src/app/home/home.component.ts(16,3) 中的错误:错误 TS2345:类型为“{ 选择器:字符串; templateUrl: string;
模板网址:字符串; styleUrls: string[];
样式网址:字符串[]; directives: typeof CeiboShare[];
指令:typeof CeiboShare[]; }' is not assignable to parameter of type 'Component'.
}' 不可分配给类型为“组件”的参数。 Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.
对象字面量只能指定已知属性,并且“指令”不存在于“组件”类型中。
Date: 2018-02-27T09:02:42.288Z - Hash: bedb972b22f9a72ebb59 - Time: 2832ms 5 unchanged chunks chunk {main} main.bundle.js (main) 367 kB [initial] [rendered]日期:2018-02-27T09:02:42.288Z - 哈希:bedb972b22f9a72ebb59 - 时间:2832 毫秒 5 个不变块 {main} main.bundle.js (main) 367 kB [初始] [渲染]
webpack: Compiled successfully. webpack:编译成功。
The simple way for you is to import in your app.modules.ts like this 1) import {CeiboShare} from 'ng2-social-share';简单的方法是像这样导入 app.modules.ts 1) import {CeiboShare} from 'ng2-social-share';
@NgModule({
declarations: [ AppComponent, CeiboShare ] })声明:[ AppComponent, CeiboShare ] })
2) and then in your home.component.ts 2) 然后在你的 home.component.ts
you need to just only define the url sharing link and image url sharing if you want like this:如果你想要这样,你只需要定义 url 共享链接和图像 url 共享:
//vars used only for example, put anything you want :)
public repoUrl = ' https://www.egozola.com '; public repoUrl = ' https://www.egozola.com '; public imageUrl = 'https://avatars2.githubusercontent.com/u/10674541?v=3&s=200 ';
public imageUrl = 'https://avatars2.githubusercontent.com/u/10674541?v=3&s=200 ';
the in your home.component.html the you can call sharing easily like this在你的 home.component.html 中,你可以像这样轻松地调用共享
button ceiboShare [facebook]="{u: repoUrl}">Facebook Linkedin Google Plus Twitter Pinterest按钮 ceiboShare [facebook]="{u: repoUrl}">Facebook Linkedin Google Plus Twitter Pinterest
good all thing is working well一切都很好
What you could do is to use these functions on your typescript file and call it from the template.你可以做的是在你的打字稿文件上使用这些函数并从模板中调用它。
Providing here 5 Social Media Share - Facebook, Pinterest, Twitter, GooglePlus, LinkedIn此处提供 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');
}
Hope this will help you or somebody else.希望这会对您或其他人有所帮助。 Thanks!
谢谢!
remove that directives: [CeiboShare]
from @component decorator.从@component 装饰器中删除
directives: [CeiboShare]
。 It is not supported in angular 4 and you don't even need to import it into your component. Angular 4 不支持它,你甚至不需要将它导入到你的组件中。 Just Import into Ngmodule as below,
只需按如下方式导入 Ngmodule,
import { CeiboShare } from 'ng2-social-share';
@NgModule({
imports: [
CeiboShare.forRoot()
]
});
This would suffice to get it working in any component as attribute directives.这足以让它在任何组件中作为属性指令工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.