Angular 2 - 通過工具提示分享突出顯示的文本

我是Angular（全新的，事實上）的新手，我一直在研究如何完成此任務，但我還沒有發現任何有用的東西。我想也許我不知道要搜索什麼。我相信這是以前做過的事情。Angular 2 - 通過工具提示分享突出顯示的文本

給你一些背景：目前我忙於幫助Angular 2項目，我想要做的是當用戶在文章中突出顯示一些文本時，工具提示應該彈出不同的分享選項（Linkedin， Twitter，電子郵件）。當用戶選擇其中一個共享選項時，他們突出顯示的文本將在該社交媒體的默認共享窗口中預先填充。基本上它是你的標準「分享這個頁面」的功能，但是我希望它可以預先填充任何用戶突出顯示的內容。

恐怕我沒有代碼可以分享，因爲我不知道從哪裏開始。 Angular 2目前相當不堪一擊。我會很感激任何幫助，即使它只是一些閱讀材料或我可以遵循的一些步驟來幫助我走。

謝謝！

來源

2017-04-11 Sunshingun

我設法弄清楚了（一個星期後）。對於任何想知道的人來說，這是我想出的。另請注意，我使用插件Popper.js作爲彈出窗口。

這裏是我的HTML（component.html文件）：

<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文件：

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%[email protected] ";  
     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() { 

    } 

}

我希望這可以幫助其他人尋找類似的東西！

來源

2017-04-18 11:33:53 Sunshingun

Angular 2 - 通過工具提示分享突出顯示的文本

回答

相關問題