각도 2 - 툴팁을 사용하여 강조 표시된 텍스트 공유

Question

저는 Angular (새로운, 사실)에 익숙하지 않으며이 작업을 어떻게 완료 할 수 있는지 정확히 연구했지만 아직 도움이되는 자료는 찾지 못했습니다. 나는 아마 나는 단지 무엇을 검색해야하는지 전혀 모른다라고 생각한다. 나는 이것이 이전에 행해졌 던 것이라고 확신합니다.

일부 컨텍스트 제공 : 현재 Angular 2 프로젝트를 돕고 있습니다. 사용자가 기사의 일부 텍스트를 강조 표시하고 툴팁에 다른 공유 옵션이 표시되어야합니다 (Linkedin, 트위터, 이메일). 사용자가 이러한 공유 옵션 중 하나를 선택하면 강조 표시된 텍스트가 해당 소셜 미디어의 기본 공유 창에 미리 채워집니다. 기본적으로 그것은 당신의 표준 "공유이 페이지"기능이지만, 사용자가 강조한 것이 무엇이든 미리 채워지 길 원합니다.

어디서부터 시작해야할지 모르므로 공유 할 코드가 없습니다. 각도 2는 지금 당장 압도적입니다. 어떤 도움이 될만한 자료라도 도움이 될 것입니다.

감사합니다.

Answer 1

나는 그것을 알아낼 수 있었다 (1 주일 후). 내가 알고 싶어 할지도 모르는 사람을 위해 내가 생각해내는 것은 여기있다. 팝업을 위해 Popper.js 플러그인을 사용했습니다.

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

    } 

} 

: 선택과 건축 공유 링크를 처리하는 내 component.ts 파일에 어떤

<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> 

그리고 여기입니다 : 여기

내 HTML (component.html 파일)입니다 비슷한 일을하는 다른 사람들을 도울 수 있기를 바랍니다.