Angular2 如何从路由中生成/反转URL (typescript)。

Question

如何通过代码从路由生成URL？例如，我在我的路由中有一个登录组件：

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

我想构建一个字符串，表示我的登录组件的URL：

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

- Ben

Answer 1

您可以注入路由器（Router）和URL序列化器（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);

另请参阅

• https://angular.io/api/router/Router
• https://angular.io/api/router/UrlSerializer
• https://angular.io/api/common/Location
• https://angular.io/api/router/NavigationExtras
• https://angular.io/api/router/ActivatedRoute

示例代码

- Günter Zöchbauer

---

感谢您的回复。使用此代码，完整的URL为'/login'。 为什么域名没有被添加？ let tree = router.createUrlTree(['login']); let url = urlSerializer.serialize(tree); let fullUrl = location.prepareExternalUrl(url); - Ben

它仍然没有返回完整的URL。它仅返回“/path” :( - Ben

这段代码是有效的：let fullUrl = location.prepareExternalUrl(window.location.origin + url); - Ben

谢谢反馈。window.location.origin + location.prepareExternalUrl(url) 对我有用（请参考 Plunker）。 - Günter Zöchbauer

感谢@Jason重新激活我的旧回答 :) - Günter Zöchbauer

没问题，@Günter！ - Jason