Question

次のような現在、私は、ハードコーディングされてきたリンク上で共有できるように

<a href="https://twitter.com/home?status=http%3A//www.beeps.com%3A7002/index.html" class="SHARE TWITTER" onclick='window.open(this.href,"popupwindow", "width=800,height=500,left=200,top=5,scrollbars,toolbar=0,resizable"); return false;' target="social"></a> 

のFacebook：

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//www.beeps.com%3A7002/index.html" class="SHARE FACEBOOK" onclick='window.open(this.href,"popupwindow", "width=800,height=500,left=200,top=5,scrollbars,toolbar=0,resizable"); return false;' target="social"></a> 

リンクされたIn、Twitter、Facebookから参照された場合、これらのリンクはすべて動作しているようですが、現在のAngular 2ルートに基づいて<a>要素の&url=http%3A//www.beeps.com%3A7002/index.html部分を代入するAngular 2を作成したいので、すべてのページでこれをハードコードします。

Answer 1

私は、現在のルートURLを含む変数を設定するroute.watcher.service.tsを作成しました。作成する必要のある各ソーシャルメディア共有について、route.watcher.service.tsからのルートURL値を単純にコピーしたコンポーネントファイル特定のソーシャルメディア共有コンポーネント内のアンカー<a>hrefの属性にバインドされたデータです。

ルートウォッチャーサービス：

import {Injectable} from "@angular/core"; 
import {Router} from '@angular/router'; 

@Injectable() 
export class RouteWatcherService { 
    private routeUrl:string; 

    constructor(private router:Router) { 
     this.router.changes.subscribe(() => { 
      this.routeUrl = this.router.serializeUrl(this.router.urlTree); 
     }); 
    } 

    url():string { 
     return this.routeUrl; 
    } 
} 

Twitterの共有コンポーネント：

import {Component} from '@angular/core'; 
import {RouteWatcherService} from '../route.watcher.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'twitter-component', 
    templateUrl: 'twitter.component.html' 
}) 

export class TwitterComponent { 
    constructor(private routeWatcher:RouteWatcherService) {} 

    routeHref() { 
     return window.location.protocol + '//' + window.location.host + this.routeWatcher.url(); 
    } 
} 

Twitterで共有コンポーネントHTMLテンプレート：

<a href="https://twitter.com/home?status={{routeHref()}}" class="SHARE TWITTER" onclick='window.open(this.href,"popupwindow", "width=800,height=500,left=200,top=5,scrollbars,toolbar=0,resizable"); return false;' target="social"></a>