Angular2 reverse/generate 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);

另见

Plunker example

Angular2 reverse/generate url 来自路由（打字稿）

Angular2 reverse/generate url from Routes (typescript)

url

reverse

routes

build

angular