-1

Может есть какие-то готовые компоненты которые могут позволить делать репост записей в соц. сети для Angular 6? Посоветуйте кто чем пользуется и какие плюсы и минусы у существующих готовых компонентов. Буду очень благодарен.

0

1 ответ 1

2

Таких компонентов не пруд пруди, но есть, который постоянно поддерживается ngx-sharebuttons https://github.com/MurhafSousli/ngx-sharebuttons, очень прост в установке и использовании:

yarn add @ngx-share/{core,button}

Импортируем модуль:

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { ShareButtonModule } from '@ngx-share/button';

@NgModule({
    imports: [
        BrowserModule,
        HttpClientModule,
        ShareButtonModule.forRoot()
    ],
    declarations: [...],
    bootstrap: [...]
})
export class AppModule {}

Импортируем нужные нам стили:

@import '~@ngx-share/button/styles/share-buttons';
@import '~@ngx-share/button/styles/themes/default/default-theme';

Теперь можем использовать компонент share-button в нашем приложении:

<share-button button="facebook"></share-button>

button это binding, принимает строкой провайдер для шаринга (facebook | linkedin | telegram | vk). При клике на кнопку открывается popup для шаринга, вы можете указать свой через binding url

<share-button button="facebook" url="https://facebook.com?share=BLAH_BLAH"></share-button>

Не забываем про иконки:

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-solid-svg-icons

К сожалению, в ngx-sharebuttons V6 для Angular 6+ нужно вручную импортировать их в polyfills.ts:

import { library, IconDefinition } from '@fortawesome/fontawesome-svg-core';

import { faFacebookF } from '@fortawesome/free-brands-svg-icons/faFacebookF';
import { faTwitter } from '@fortawesome/free-brands-svg- icons/faTwitter';
import { faRedditAlien } from '@fortawesome/free-brands-svg-icons/faRedditAlien';
import { faLinkedinIn } from '@fortawesome/free-brands-svg-icons/faLinkedinIn';
import { faGooglePlusG } from '@fortawesome/free-brands-svg-icons/faGooglePlusG';
import { faTumblr } from '@fortawesome/free-brands-svg-icons/faTumblr';
import { faPinterestP } from '@fortawesome/free-brands-svg-icons/faPinterestP';
import { faWhatsapp } from '@fortawesome/free-brands-svg-icons/faWhatsapp';
import { faVk } from '@fortawesome/free-brands-svg-icons/faVk';
import { faFacebookMessenger } from '@fortawesome/free-brands-svg-icons/faFacebookMessenger';
import { faTelegramPlane } from '@fortawesome/free-brands-svg-icons/faTelegramPlane';

const icons: IconDefinition[] = [
    faFacebookF,
    faTwitter,
    faLinkedinIn,
    faGooglePlusG,
    faPinterestP,
    faRedditAlien,
    faTumblr,
    faWhatsapp,
    faVk,
    faFacebookMessenger,
    faTelegramPlane,
    ......
];

library.add(...icons);
2
  • Спасибо, посмотрю что за оно и как работает.
    – Sanvirtus
    1 авг 2018 в 14:56
  • Спасибо, отличные кнопки, жаль что OK нету)
    – Sanvirtus
    2 авг 2018 в 7:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.