Question

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

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

我担心我没有代码可以分享，因为我不知道从哪里开始。 Angular 2目前势不可挡。我会感激任何帮助，即使它只是一些阅读材料或我可以遵循的一些步骤，以帮助我去。

谢谢！

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 - 通过工具提示共享突出显示的文本

1 个答案: