角2 - ツールチップで強調表示されたテキストを共有

Question

私はAngular（新品、真実）を初めて習得しており、この作業をどのように完了できるかを研究していますが、まだ役に立たないものは何も見つかりません。私はおそらく私は何を検索するか分からないと思う。私はこれが以前に行われたことだと確信しています。

私は現在Angular 2プロジェクトを手伝っていますが、私がしたいのは、ユーザーが記事内のテキストをハイライト表示し、ツールチップに異なる共有オプションをポップアップする必要があるということです（Linkedin、 Twitter、電子メール）。ユーザーがこれらの共有オプションの1つを選択すると、強調表示されたテキストは、そのソーシャルメディアのデフォルトの共有ウィンドウにあらかじめ入力されます。基本的にはあなたの標準的な「このページを共有する」機能ですが、ユーザーが強調表示しているものをあらかじめ入力しておきたいと思います。

私はどこから始めるべきかわからないので、共有するコードはありません。角2は今のところ圧倒的です。たとえそれが単なる読書資料であっても、私が私を助けるために従うことができるいくつかのステップであっても、私はどんな助けにも感謝します。

ありがとうございます！

Answer 1

私はそれを把握することができました（1週間後）。ここで私が思いついたのは、知りたい人のためです。ポップアップにはPopper.jsというプラグインを使用しました。ここで

は私のHTML（component.htmlファイル）です。

import { Component, OnInit } from '@angular/core'; 
import * as Popper from 'popper.js/dist/umd/popper.js'; // plugin 

@Component({ 
    selector: 'share-highlight', 
    templateUrl: './share-highlight.component.html', 
    styleUrls: ['./share-highlight.component.scss'] 
}) 
export class ShareHighlightComponent implements OnInit { 

    selectedtext : string = ''; 
    twitterlink : string = ''; 
    linkedinlink : string = ''; 
    emaillink : string = ''; 

    showStyle : boolean = false; 

    showSelectedText(event) { 
     let element = event; // this was mostly for testing 

     var text = ""; 
     if (window.getSelection) { 
      // Get the text that was selected 
      text = window.getSelection().toString(); 

      if (text != "") { 
       // See where the selection is and attach popper to it 
       var selection = window.getSelection().getRangeAt(0); 

       // Setting up the tooltip (popper) 
       let popper = document.querySelector('.js-popper'); 
       new Popper(selection,popper, { 
        placement: 'top' 
       }); 

       // Show popper 
       this.showStyle = true; 
      } else { 
       // Hide popper 
       this.showStyle = false; 
      } 

     } else { 
      this.showStyle = false; 
     } 

     // Value of the selected Text 
     this.selectedtext = text; 

     // Building the share links with highlighted text and additional info you might want to add 
     this.twitterlink = "https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.WebsiteLinkHere.com&text=" + this.selectedtext.split(' ').join('%20') + "%20via%20@TwitterHandle ";  
     this.linkedinlink = "https://www.linkedin.com/shareArticle?mini=true&url=http://www.WebsiteLinkHere.com&title=" + ("Title here.").split(' ').join('%20') + "&summary=" + this.selectedtext.split(' ').join('%20') + "&source=SourceHere"; 
     this.emaillink = "mailto:?subject=" + ("Email subject line here.").split(' ').join('%20') + "&body=" + this.selectedtext.split(' ').join('%20') + (". Some additional text here if you want, http%3A%2F%2Fwww.WebsiteLinkHere.com.").split(' ').join('%20'); 

    } 

    getStyle() { 
     if(this.showStyle) { 
      return "block"; 
     } else { 
      return "none"; 
     } 
    } 

    constructor() { } 

    ngOnInit() { 

    } 

} 

：

<div class="share-highlight" (mouseup)="showSelectedText($event)"> 
    <p>Some test content here</p> 

    <!-- This here is the actual popup and links to social media --> 
    <div class="js-popper share-highlight__tooltip" [style.display]="getStyle()"> 
     <div class="share-highlight__tooltip-arrow"></div> 
     <a target="_blank" class="share-highlight__social-icons" href="{{linkedinlink}}"><span class="fa fa-linkedin"></span></a> <a target="_blank" class="share-highlight__social-icons" href="{{twitterlink}}"><span class="fa fa-twitter"></span></a><a class="share-highlight__social-icons" href="{{emaillink}}"><span class="fa fa-envelope"></span></a> 
    </div> 
</div> 

そしてここでは、選択を処理し、共有リンクを構築し、私のcomponent.tsファイルには何かということです私はこれが似たようなことをしている誰かを助けることができれば嬉しいです