blocks|key|4412570|text|如果只需要字符串形式的路由路径，可以通过迭代Router对象的config数组来找到它们。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4412571|++++for+(var+i+=+0;+i+<+this.router.config.length;+i%2B%2B)+{
++++++++var+routePath:string+=+this.router.config[i].path;
++++++++console.log(routePath);
++++}|code-block|syntax|javascript|4412572|entityMap^0|M|6|V|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

If you only need the route paths as strings, you can find them by iterating over your <code>Router</code> object's <code>config</code> array.

<pre><code> for (var i = 0; i &lt; this.router.config.length; i++) {
 var routePath:string = this.router.config[i].path;
 console.log(routePath);
 }
</code></pre>

blocks|key|4412663|text|对于@angular版本2.00，我能够通过routeConfig属性找到孩子的列表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412664|下面是我的组件的一个示例。请注意，我通过'parent‘属性访问子组件，因为组件实际上是子组件之一，因为我在子路由器插座中呈现它。|4412665|import+{+Component+}+from+'@angular/core';
import+{Route,+ActivatedRoute,+Router}+from+"@angular/router";

@Component({
++++selector:+'list',
++++template:+require('./list.component.html')
})
export+class+ListComponent+{
++++children+=+new+Array<RouteLink>();

++++constructor(private+router:+Router,+private+activatedRoute:+ActivatedRoute)+{
++++++++for+(let+child+of+activatedRoute.parent.routeConfig.children)+{
++++++++++++if+(child.path+&&+child.data["breadcrumb"])+{
++++++++++++++++this.children.push(new+RouteLink(child.path,+child.data["breadcrumb"]));
++++++++++++}
++++++++}
++++}
}

export+class+RouteLink+{
++++constructor(private+path:+string,+private+name:+string)+{++}
}|code-block|syntax|javascript|4412666|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For @angular version 2.00 I was able to find a list of the children through the routeConfig property. 

Here is an example of my component. 
Note, I'm accessing the children via the 'parent' property as the component is actually one of the children as I'm rendering it in the child router-outlet.

<pre><code>import { Component } from '@angular/core';
import {Route, ActivatedRoute, Router} from "@angular/router";

@Component({
 selector: 'list',
 template: require('./list.component.html')
})
export class ListComponent {
 children = new Array&lt;RouteLink&gt;();

 constructor(private router: Router, private activatedRoute: ActivatedRoute) {
 for (let child of activatedRoute.parent.routeConfig.children) {
 if (child.path &amp;&amp; child.data["breadcrumb"]) {
 this.children.push(new RouteLink(child.path, child.data["breadcrumb"]));
 }
 }
 }
}

export class RouteLink {
 constructor(private path: string, private name: string) { }
}
</code></pre>

blocks|key|4412732|text|显然，有一种非常简洁的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412733|constructor(private+router:+Router)+{}

ngOnInit()+{
++console.log('configured+routes:+',+this.router.config);
}|code-block|syntax|javascript|4412734|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Apparently there is a very compact way to do it:

<pre><code>constructor(private router: Router) {}

ngOnInit() {
 console.log('configured routes: ', this.router.config);
}
</code></pre>

blocks|key|4412831|text|如果您有惰性路由，则使用此解决方案会遇到问题。我创建了一个简单的bash命令来显示路由信息：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412832|cd+/path/to/app+
for+r+in+$(find+src+-name+"*.routes.ts");+do+
++echo+$r;+grep+"path:\%7Ccomponent:\%7CloadChildren:"+$r;+
done|code-block|syntax|javascript|4412833|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You run into issues using this solution if you have Lazy routes. I made a simple bash command to show the routing information: 

<pre><code>cd /path/to/app 
for r in $(find src -name "*.routes.ts"); do 
 echo $r; grep "path:\|component:\|loadChildren:" $r; 
done
</code></pre>

blocks|key|4412857|text|我正在使用这个公司。获取angular+9中的所有路由|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4412858|import+{+Compiler,+Component,+Injector,+OnInit+}+from+'@angular/core';
import+{+Route,+Router+}+from+'@angular/router';

@Component({
++templateUrl:+'./sitemap.component.html'
})
export+class+SiteMapComponent+implements+OnInit+{

++public+urls:+string[]+=+[];
++constructor(private+_router:+Router,+private+compiler:+Compiler,+private+injector:+Injector)+{

++}

++ngOnInit()+{
++++this._router.config.forEach(i+=>+{
++++++this.getPaths(i);
++++})
++}

++getPaths(route:+Route,+parent:+string+=+'')+{
++++if+(route.redirectTo)+{
++++++return;
++++}
++++if+(route.children)+{
++++++route.children.forEach(i+=>+{
++++++++this.getPaths(i,+parent+%2B+route.path);
++++++});
++++}
++++else+if+(route.loadChildren)+{
++++++(<any>this._router).configLoader.load(this.injector,+route).subscribe(i+=>+{
++++++++i.routes.forEach(j+=>+{
++++++++++this.getPaths(j,+parent+%2B+route.path)
++++++++});
++++++});
++++}
++++else+if+(route.path+!=+null)+{
++++++this.setPath(route.path,+parent);
++++}
++}
++setPath(path,+parent)+{
++++let+fullPath:+string;
++++if+(path+!=+null)+{
++++++if+(parent)+{
++++++++fullPath+=+`/${parent}/${path}`;
++++++}
++++++else+{
++++++++fullPath+=+`/${path}`
++++++}
++++}
++++this.urls.push(fullPath)
++}
}|code-block|syntax|javascript|4412859|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I am using this comp. to get all routes in angular 9
<pre><code>import { Compiler, Component, Injector, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';

@Component({
 templateUrl: './sitemap.component.html'
})
export class SiteMapComponent implements OnInit {

 public urls: string[] = [];
 constructor(private _router: Router, private compiler: Compiler, private injector: Injector) {

 }

 ngOnInit() {
 this._router.config.forEach(i =&gt; {
 this.getPaths(i);
 })
 }

 getPaths(route: Route, parent: string = '') {
 if (route.redirectTo) {
 return;
 }
 if (route.children) {
 route.children.forEach(i =&gt; {
 this.getPaths(i, parent + route.path);
 });
 }
 else if (route.loadChildren) {
 (&lt;any&gt;this._router).configLoader.load(this.injector, route).subscribe(i =&gt; {
 i.routes.forEach(j =&gt; {
 this.getPaths(j, parent + route.path)
 });
 });
 }
 else if (route.path != null) {
 this.setPath(route.path, parent);
 }
 }
 setPath(path, parent) {
 let fullPath: string;
 if (path != null) {
 if (parent) {
 fullPath = `/${parent}/${path}`;
 }
 else {
 fullPath = `/${path}`
 }
 }
 this.urls.push(fullPath)
 }
}
</code></pre>

blocks|key|4412861|text|我创建了一个基于answer+of+@OMANSAK的util函数。使用Angular+12和延迟加载模块进行了测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4412862|import+{+Injector+}+from+'@angular/core';
import+{+Router,+Route+}+from+'@angular/router';

const+routerUrls:+string[]+=+[];

async+function+getPaths(router:+Router,+injector:+Injector,+route:+Route,+parent:+string+=+''):+Promise<void>+{
+++if+(route.redirectTo)+{
+++++++return;
+++}
+++if+(route.children)+{
+++++++for+(const+childRoute+of+route.children)+{
+++++++++++await+getPaths(router,+injector,+childRoute,+parent+%2B+route.path);
+++++++}
+++}+else+if+(route.loadChildren)+{
+++++++const+lazyConfig+=+await+router['configLoader'].load(injector,+route).toPromise();
+++++++for+(const+childRoute+of+lazyConfig.routes)+{
+++++++++++await+getPaths(router,+injector,+childRoute,+parent+%2B+route.path);
+++++++}
+++}+else+if+(route.path+!==+null)+{
+++++++if+(route.path+!==+'')+{
+++++++++++routerUrls.push(parent+?+`/${parent}/${route.path}`+:+`/${route.path}`);
+++++++}+else+{
+++++++++++routerUrls.push(parent+?+`/${parent}`+:+'');
+++++++}
+++}
}

/**
+*+Returns+routes+of+the+app+via+the+Angular+Router.
+*
+*+Important:+The+fallback+route+in+the+app+module+(path:+"**")
+*+has+to+be+the+last+element+in+your+top+level+app-routing-module.
+*
+*+@param+router+Angular+Router
+*+@param+injector+Angular+Injector
+*+@returns+Routes+of+the+app
*/
export+async+function+getAllPaths(router:+Router,+injector:+Injector):+Promise<string[]>+{
+++const+topLevelRoutes+=+router.config.slice(
+++++++0,
+++++++router.config.findIndex((route)+=>+route.path+===+'**')+??+router.config.length+-+1
+++);
+++for+(const+i+of+topLevelRoutes)+{
+++++++await+getPaths(router,+injector,+i);
+++}
+++return+routerUrls;
}|code-block|syntax|javascript|4412863|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/66154129/9740071^0|8|I|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

I’ve created a util function based on the <a href="https://stackoverflow.com/a/66154129/9740071">answer of @OMANSAK</a>.
Tested with Angular 12 and lazy loaded modules.
<pre class="lang-js prettyprint-override"><code>import { Injector } from '@angular/core';
import { Router, Route } from '@angular/router';

const routerUrls: string[] = [];

async function getPaths(router: Router, injector: Injector, route: Route, parent: string = ''): Promise&lt;void&gt; {
 if (route.redirectTo) {
 return;
 }
 if (route.children) {
 for (const childRoute of route.children) {
 await getPaths(router, injector, childRoute, parent + route.path);
 }
 } else if (route.loadChildren) {
 const lazyConfig = await router['configLoader'].load(injector, route).toPromise();
 for (const childRoute of lazyConfig.routes) {
 await getPaths(router, injector, childRoute, parent + route.path);
 }
 } else if (route.path !== null) {
 if (route.path !== '') {
 routerUrls.push(parent ? `/${parent}/${route.path}` : `/${route.path}`);
 } else {
 routerUrls.push(parent ? `/${parent}` : '');
 }
 }
}

/**
 * Returns routes of the app via the Angular Router.
 *
 * Important: The fallback route in the app module (path: &quot;**&quot;)
 * has to be the last element in your top level app-routing-module.
 *
 * @param router Angular Router
 * @param injector Angular Injector
 * @returns Routes of the app
*/
export async function getAllPaths(router: Router, injector: Injector): Promise&lt;string[]&gt; {
 const topLevelRoutes = router.config.slice(
 0,
 router.config.findIndex((route) =&gt; route.path === '**') ?? router.config.length - 1
 );
 for (const i of topLevelRoutes) {
 await getPaths(router, injector, i);
 }
 return routerUrls;
}
</code></pre>

I have a quick question. I'm currently looking through <a href="https://angular.io/docs/ts/latest/api/router/Router-class.html">https://angular.io/docs/ts/latest/api/router/Router-class.html</a> but I was wondering, in my Angular2's <code>main.ts</code> I have my routes defined thus: 

<pre><code>@Routes([
 { path: '/', component: HomeComponent },
 { path: '/about-me', component: AboutMeComponent },
 { path: '/food', component: FoodComponent },
 { path: '/photos', component: PhotosComponent },
 { path: '/technology', component: TechnologyComponent },
 { path: '/blog', component:Blogomponent },
])
</code></pre>

Now in a component elsewhere I import the Router class. In my component (or the component template) I would like to loop through all my routes defined or just be able to access them. Is there a built in way to do this? Like some function that returns an object array? Here is a crude idea of what I want...

<pre><code>@Component({
 selector: 'ms-navigation',
 templateUrl: 'src/navigation/navigation.template.html',
 directives: [ ROUTER_DIRECTIVES ]
})

export class NavigationComponent {
 constructor(private router:Router) { 
 // what can I do here to get an array of all my routes?
 console.log(router.routes); ????
 }
}
</code></pre>

How to list / output all routes in @Routes in my Angular2 App

路由器

路由

我有一个简短的问题。我目前正在通过查找，但我想知道，在我的Angular2的main.ts中，我的路线定义如下：@Routes([    { path: '/', component: HomeComponent },    { path: '/about-me', component: AboutMeComponen...

问如何在我的Angular2应用中列出/输出@Routes中的所有路由
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在我的Angular2应用中列出/输出@Routes中的所有路由EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在我的Angular2应用中列出/输出@Routes中的所有路由
EN