Angular 2 当前路由将在 Linked In、Twitter 和 Facebook 上共享

Question

目前我已经硬编码了如下链接：

链接于：

<a href="https://www.linkedin.com/shareArticle?mini=true&url=http%3A//www.beeps.com%3A7002/index.html&title=&summary=&source=" class="SHARE LINKED_IN" onclick='window.open(this.href,"popupwindow", "width=800,height=500,left=200,top=5,scrollbars,toolbar=0,resizable"); return false;' target="social"></a>

唽：

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

脸书：

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

所有这些链接在从 Linked In、Twitter 或 Facebook 引用时似乎都可以工作 - 但我想创建一个 Angular 2，根据当前的 Angular 2 路由替换<a>元素的&url=http%3A//www.beeps.com%3A7002/index.html部分，所以我们不必为每个页面硬编码。

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

推特分享组件：

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();
}
}

推特分享组件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>