Javascript 角度2-通过工具提示共享高亮显示的文本

我是Angular（事实上是全新的）的新手，我一直在研究如何才能完成这项任务，但到目前为止我还没有发现任何有用的东西。我想也许我只是不知道该找什么。我相信这是以前做过的事情

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

恐怕我没有代码可以共享，因为我甚至不知道从哪里开始。角度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>

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() {

    }

}