Angular2 从 Routes (typescript) 反向/生成 url

Question

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

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

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

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

Answer 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);

也可以看看

• 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

Plunker 示例