使用 Angular HTML 中的主机名访问当前 url答案

【问题标题】：Access current url with the host name in Angular HTML使用 Angular HTML 中的主机名访问当前 url
【发布时间】：2018-08-28 06:57:15
【问题描述】：

如何使用 Angular 访问模板中的当前 url。

我试过了，

  <li><a href="../../profile?returnUrl="+router.url>Profile</a></li>

但它会抛出一个错误提示，

无法对“元素”执行“setAttribute”：“+router.url”不是有效的属性名称。

【问题讨论】：

Angular 不知道你希望它插值。试试[href]=" '../../profile?returnUrl=' + router.url"

标签： angular typescript

【解决方案1】：

你可以试试{{router?.url}}

<li><a href="../../profile?returnUrl={{router?.url}}">Profile</a></li>

【讨论】：

【解决方案2】：

如果你的 url 在你的“.routing”文件中是这样的：/profile/:returnUrl

你可以用这种方式代替[href]：[routerLink]="['/profile', router.url]"

【讨论】：

【解决方案3】：

原版 JavaScript：

// Get current url
var url = window.location.href;

// Parse url
var splitUrl   = url.split('/');

// Get page name
var page = splitUrl[splitUrl.length - 1];

获取页面名称后，您可以将此 page 变量设置为 Angular 或其他元素中的元素。

在 jQuery 中：

$('li>a').attr('href', page);

在 Angular 中：

var elem = angular.element(document.querySelector('li>a'));
elem.attr('href','../../profile?returnUrl=' + page);

【讨论】：

您提出的角度解决方案适用于 AngularJS（标签是 angularjs）。虽然解决方案是完整的，但我建议您将真正的解决方案添加到上述问题中，它应该与 angular 2+ 相关（标签“Angular”明确引用 angular 2+）。