Angular2从Routes反向/生成url（打字稿）答案

【问题标题】：Angular2 reverse/generate url from Routes (typescript)Angular2从Routes反向/生成url（打字稿）
【发布时间】：2016-10-15 11:04:43
【问题描述】：

如何从路由代码生成 url？例如，我的路线中有一个登录组件：

const appRoutes: Routes = [
    ...
    { path: 'login', component: LoginComponent },
    ...
];

我想构建一个与我的登录组件的url对应的字符串：

let url = "I don't know";
console.log(url); ----> 'http:localhost:4200/login'

【问题讨论】：

标签： url angular build routes reverse

【解决方案1】：

你可以注入Router和UrlSerializer

constructor(router: Router, urlSerializer: UrlSerializer, route: ActivatedRoute) {
  let tree = router.createUrlTree(['/path', param, 'otherPath'], { relativeTo: route, queryParams: {y: z} });
  let url = urlSerializer.serialize(tree);
}

当router.createUrlTree 如上所述被赋予激活路由时，它会从路由开始应用给定的命令。当没有给定路由时，它会从根开始应用给定的命令。

要获取 URL 的静态部分，您可能需要注入 Location 并使用

let fullUrl = window.location.origin + location.prepareExternalUrl(url);

另见

Plunker example

【讨论】：

感谢您的回复。使用此代码，完整的 URL 是“/login”。为什么不添加域名？ let tree = router.createUrlTree(['login']); let url = urlSerializer.serialize(tree); let fullUrl = location.prepareExternalUrl(url);
它仍然没有返回完整的 url。它返回/path :(
此代码有效：let fullUrl = location.prepareExternalUrl(window.location.origin + url);
感谢您的反馈。 window.location.origin + location.prepareExternalUrl(url) 为我工作（见 Plunker）
不用担心@Günter！