Angular 2 - 通过工具提示分享突出显示的文本

问题描述：

我是Angular（全新的，事实上）的新手，我一直在研究如何完成此任务，但我还没有发现任何有用的东西。我想也许我不知道要搜索什么。我相信这是以前做过的事情。Angular 2 - 通过工具提示分享突出显示的文本

给你一些背景：目前我忙于帮助Angular 2项目，我想要做的是当用户在文章中突出显示一些文本时，工具提示应该弹出不同的分享选项（Linkedin， Twitter，电子邮件）。当用户选择其中一个共享选项时，他们突出显示的文本将在该社交媒体的默认共享窗口中预先填充。基本上它是你的标准“分享这个页面”的功能，但是我希望它可以预先填充任何用户突出显示的内容。

恐怕我没有代码可以分享，因为我不知道从哪里开始。 Angular 2目前相当不堪一击。我会很感激任何帮助，即使它只是一些阅读材料或我可以遵循的一些步骤来帮助我走。

谢谢！

答

我设法弄清楚了（一个星期后）。对于任何想知道的人来说，这是我想出的。另请注意，我使用插件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() { 

    } 

}

我希望这可以帮助其他人寻找类似的东西！

Angular 2 - 通过工具提示分享突出显示的文本

相关推荐