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

Question

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

给你一些背景信息：我目前正忙于帮助一个 Angular 2 项目，我想做的是当用户突出显示文章中的某些文本时，工具提示应该弹出不同的共享选项（Linkedin、Twitter、电子邮件）。当用户选择这些共享选项之一时，他们突出显示的文本将预填充到该社交媒体的默认共享 window 中。基本上这是您的标准 "share this page" 功能，但我希望它预先填充用户突出显示的任何内容。

恐怕我没有代码可以分享，因为我什至不知道从哪里开始。 Angular 2 目前非常压倒性。我将不胜感激任何帮助，即使只是一些阅读 material 或我可以遵循的一些步骤来帮助我前进。

谢谢！

Answer 1

我设法弄明白了（一周后）。这是我想出的，对于任何可能想知道的人。另请注意，我使用插件 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%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() {

    }

}

我希望这可以帮助任何其他想要做类似事情的人！

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

Angular 2 - Share highlighted text via tooltip

javascript

share

tooltip

angular