blocks|key|2889934|text|您可以定义多个带参数和不带参数的路由：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2889935|@RouteConfig([
++++{+path:+'/user/:id',+component:+User,+name:+'User'+},
++++{+path:+'/user',+component:+User,+name:+'Usernew'+}
])|code-block|syntax|javascript|2889936|并处理组件中的可选参数：|2889937|constructor(params:+RouteParams)+{
++++var+paramId+=+params.get("id");

++++if+(paramId)+{
++++++++...
++++}
}|2889938|另请参阅相关的github问题：https://github.com/angular/angular/issues/3525|offset|length|2889939|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular/issues/3525^0|0|0|0|0|G|1A|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

You can define multiple routes with and without parameter:

<pre><code>@RouteConfig([
 { path: '/user/:id', component: User, name: 'User' },
 { path: '/user', component: User, name: 'Usernew' }
])
</code></pre>

and handle the optional parameter in your component:

<pre><code>constructor(params: RouteParams) {
 var paramId = params.get("id");

 if (paramId) {
 ...
 }
}
</code></pre>

See also the related github issue: <a href="https://github.com/angular/angular/issues/3525">https://github.com/angular/angular/issues/3525</a>

blocks|key|122417|text|当信息是可选的时，建议使用查询参数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122418|122419|+路由参数还是查询参数？|blockquote|offset|length|style|BOLD|122420|122421|没有硬性规定。总体而言,|122422|在以下情况下首选路由参数|122423|122424|122425|此值是必需的。|unordered-list-item|122426|此值是区分路由路径所必需的。|122427|122428|在以下情况下首选查询参数|122429|值为optional.|122430|the和/或multi-variate.|122431|
时，值为|122432|122433|122434|来自https://angular.io/guide/router#optional-route-parameters|122435|您只需要从路由路径中取出参数即可。|122436|@RouteConfig([
{
++++path:+'/user/',
++++component:+User,
++++as:+'User'
}])|code-block|syntax|javascript|122437|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/router#optional-route-parameters^0|0|0|1|B|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|2|1L|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1P|8|@$F|1Q|G|1R|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1T|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1U|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1X|8|@]|9|@]|A|$]]|$1|T|3|U|5|S|7|1Y|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|20|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|21|8|@]|9|@]|A|$]]|$1|10|3|11|5|S|7|22|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|23|8|@]|9|@]|A|$]]|$1|14|3|-4|5|S|7|24|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|25|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|26|8|@]|9|@$F|27|G|28|1|29]]|A|$]]|$1|18|3|19|5|6|7|2A|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|1C|7|2B|8|@]|9|@]|A|$1D|1E]]|$1|1F|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|1M]]]]

It's recommended to use a query parameter when the information is optional.

<blockquote>
 Route Parameters or Query Parameters?
 
 There is no hard-and-fast rule. In general,
 
 prefer a route parameter when
 
 <ul>
 <li>the value is required.</li>
 <li>the value is necessary to distinguish one route path from another.</li>
 </ul>
 
 prefer a query parameter when
 
 <ul>
 <li>the value is optional.</li>
 <li>the value is complex and/or multi-variate.</li>
 </ul>
</blockquote>

from <a href="https://angular.io/guide/router#optional-route-parameters" rel="noreferrer">https://angular.io/guide/router#optional-route-parameters</a>

You just need to take out the parameter from the route path.

<pre><code>@RouteConfig([
{
 path: '/user/',
 component: User,
 as: 'User'
}])
</code></pre>

blocks|key|124424|text|使用angular4，我们只需要在层次结构中将路由组织在一起|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124425|const+appRoutes:+Routes+=+[
++{+
++++path:+'',+
++++component:+MainPageComponent+
++},
++{+
++++path:+'car/details',+
++++component:+CarDetailsComponent+
++},
++{+
++++path:+'car/details/platforms-products',+
++++component:+CarProductsComponent+
++},
++{+
++++path:+'car/details/:id',+
++++component:+CadDetailsComponent+
++},
++{+
++++path:+'car/details/:id/platforms-products',+
++++component:+CarProductsComponent+
++}
];|code-block|syntax|javascript|124426|这对我很有效。这样，路由器根据选项id参数知道下一路由是什么。|124427|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

With angular4 we just need to organise routes together in hierarchy

<pre><code>const appRoutes: Routes = [
 { 
 path: '', 
 component: MainPageComponent 
 },
 { 
 path: 'car/details', 
 component: CarDetailsComponent 
 },
 { 
 path: 'car/details/platforms-products', 
 component: CarProductsComponent 
 },
 { 
 path: 'car/details/:id', 
 component: CadDetailsComponent 
 },
 { 
 path: 'car/details/:id/platforms-products', 
 component: CarProductsComponent 
 }
];
</code></pre>

This works for me . This way router know what is the next route based on option id parameters.

blocks|key|2890363|text|Angular+4-解决可选参数排序的方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2890364|执行以下操作：|2890365|const+appRoutes:+Routes+=+[
++{path:+'',+component:+HomeComponent},
++{path:+'products',+component:+ProductsComponent},
++{path:+'products/:id',+component:+ProductsComponent}
]|code-block|syntax|javascript|2890366|请注意，products路由和products/:id路由的名称完全相同。对于没有参数的路由，Angular+4将正确遵循products，如果有参数，它将遵循products/:id。|offset|length|style|CODE|2890367|但是，非参数路由products的路径不能有尾随斜杠，否则angular会错误地将其视为参数路径。因此，在我的例子中，我使用了产品的尾部斜杠，但它不起作用。|2890368|不要这样做：|2890369|...
{path:+'products/',+component:+ProductsComponent},
{path:+'products/:id',+component:+ProductsComponent},
...|2890370|entityMap^0|0|0|0|4|8|F|C|1P|8|28|C|0|8|8|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$K|10|L|11|M|N]|$K|12|L|13|M|N]|$K|14|L|15|M|N]|$K|16|L|17|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@$K|19|L|1A|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$]]

Angular 4 - Solution to address the ordering of the optional parameter:

DO THIS:

<pre><code>const appRoutes: Routes = [
 {path: '', component: HomeComponent},
 {path: 'products', component: ProductsComponent},
 {path: 'products/:id', component: ProductsComponent}
]
</code></pre>

Note that the <code>products</code> and <code>products/:id</code> routes are named exactly the same. Angular 4 will correctly follow <code>products</code> for routes with no parameter, and if a parameter it will follow <code>products/:id</code>.

However, the path for the non-parameter route <code>products</code> must not have a trailing slash, otherwise angular will incorrectly treat it as a parameter-path. So in my case, I had the trailing slash for products and it wasn't working.

DON'T DO THIS:

<pre><code>...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...
</code></pre>

blocks|key|122609|text|遇到了这个问题的另一个实例，并在寻找解决方案的过程中来到了这里。我的问题是，我正在执行子组件，并且懒惰地加载组件，以优化一些事情。简而言之，如果您正在延迟加载父模块。主要的问题是我在路由中使用了'/:id‘，并且抱怨'/’是它的一部分。这里不是确切的问题，但它适用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122610|应用程序-从父级路由|122611|...
const+routes:+Routes+=+[
++{
++++path:+'',
++++children:+[
++++++{
++++++++path:+'pathOne',
++++++++loadChildren:+'app/views/$MODULE_PATH.module#PathOneModule'
++++++},
++++++{
++++++++path:+'pathTwo',
++++++++loadChildren:+'app/views/$MODULE_PATH.module#PathTwoModule'
++++++},
...|code-block|syntax|javascript|122612|延迟加载的子路由|122613|...
const+routes:+Routes+=+[
++{
++++path:+'',
++++children:+[
++++++{
++++++++path:+'',
++++++++component:+OverviewComponent
++++++},
++++++{
++++++++path:+':id',
++++++++component:+DetailedComponent
++++++},
++++]
++}
];
...|122614|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Ran into another instance of this problem, and in searching for a solution to it came here. My issue was that I was doing the children, and lazy loading of the components as well to optimize things a bit. In short if you are lazy loading the parent module. Main thing was my using '/:id' in the route, and it's complaints about '/' being a part of it. Not the exact problem here, but it applies.

App-routing from parent 

<pre><code>...
const routes: Routes = [
 {
 path: '',
 children: [
 {
 path: 'pathOne',
 loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
 },
 {
 path: 'pathTwo',
 loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
 },
...
</code></pre>

Child routes lazy loaded

<pre><code>...
const routes: Routes = [
 {
 path: '',
 children: [
 {
 path: '',
 component: OverviewComponent
 },
 {
 path: ':id',
 component: DetailedComponent
 },
 ]
 }
];
...
</code></pre>

blocks|key|121910|text|{path:+'users',+redirectTo:+'users/',+pathMatch:+'full'},
{path:+'users/:userId',+component:+UserComponent}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|121911|这样，在添加参数时不会重新呈现组件。|unstyled|121912|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}
</code></pre>

This way the component isn't re-rendered when the parameter is added.

blocks|key|2678710|text|rerezz的回答很好，但它有一个严重的缺陷。它会导致User组件重新运行ngOnInit方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2678711|当您在那里做一些繁重的工作，并且不希望在从非参数路由切换到参数路由时重新运行它，这可能会有问题。虽然这两个路由旨在模仿可选的url参数，但不会成为两个单独的路由。|2678712|以下是我对解决这个问题的建议：|2678713|const+routes+=+[
++{
++++path:+'/user',
++++component:+User,
++++children:+[
++++++{+path:+':id',+component:+UserWithParam,+name:+'Usernew'+}
++++]
++}
];|code-block|syntax|javascript|2678714|然后，您可以将负责处理参数的逻辑转移到UserWithParam组件，并将基本逻辑保留在User组件中。当您从/user导航到/+User::ngOnInit+/123时，您在user中所做的任何操作都不会再次运行。|2678715|不要忘记将<router-outlet></router-outlet>放入User的模板中。|2678716|entityMap^0|R|4|11|8|0|0|0|0|J|D|18|4|1T|E|0|5|V|12|4|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|T|$]]

rerezz's answer is pretty nice but it has one serious flaw. It causes <code>User</code> component to re-run the <code>ngOnInit</code> method.

It might be problematic when you do some heavy stuff there and don't want it to be re-run when you switch from the non-parametric route to the parametric one. Though those two routes are meant to imitate an optional url parameter, not become 2 separate routes.

Here's what I suggest to solve the problem:

<pre><code>const routes = [
 {
 path: '/user',
 component: User,
 children: [
 { path: ':id', component: UserWithParam, name: 'Usernew' }
 ]
 }
];
</code></pre>

Then you can move the logic responsible for handling the param to the <code>UserWithParam</code> component and leave the base logic in the <code>User</code> component. Whatever you do in <code>User::ngOnInit</code> won't be run again when you navigate from /user to /user/123.

Don't forget to put the <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> in the <code>User</code>'s template.

blocks|key|2678728|text|我无法置评，但请参考：Angular+2+optional+route+parameter|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2678729|Angular+6的更新：|2678730|import+{map}+from+"rxjs/operators"

constructor(route:+ActivatedRoute)+{
++let+paramId+=+route.params.pipe(map(p+=>+p.id));

++if+(paramId)+{
++++...
++}
}|code-block|syntax|javascript|2678731|有关Angular6路由的其他信息，请参阅https://angular.io/api/router/ActivatedRoute。|2678732|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/34208745/angular-2-optional-route-parameter/34398428#34398428|1|https://angular.io/api/router/ActivatedRoute^0|B|Y|0|0|0|0|L|18|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

I can't comment, but in reference to: <a href="https://stackoverflow.com/questions/34208745/angular-2-optional-route-parameter/34398428#34398428">Angular 2 optional route parameter</a>

an update for Angular 6:

<pre><code>import {map} from "rxjs/operators"

constructor(route: ActivatedRoute) {
 let paramId = route.params.pipe(map(p =&gt; p.id));

 if (paramId) {
 ...
 }
}
</code></pre>

See <a href="https://angular.io/api/router/ActivatedRoute" rel="nofollow noreferrer">https://angular.io/api/router/ActivatedRoute</a> for additional information on Angular6 routing.

blocks|key|2678749|text|此处的建议答案包括来自rerezz的accepted+answer，该The建议添加多个路由条目。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2678750|然而，当在路由条目之间改变时，即在具有参数的路由条目和没有参数的条目之间改变时，将重新创建组件。|2678751|如果您想要避免这种情况，您可以创建自己的路由匹配器，它将匹配两个路由：|2678752|export+function+userPageMatcher(segments:+UrlSegment[]):+UrlMatchResult+{
++++if+(segments.length+>+0+&&+segments[0].path+===+'user')+{
++++++++if+(segments.length+===+1)+{
++++++++++++return+{
++++++++++++++++consumed:+segments,
++++++++++++++++posParams:+{},
++++++++++++};
++++++++}
++++++++if+(segments.length+===+2)+{
++++++++++++return+{
++++++++++++++++consumed:+segments,
++++++++++++++++posParams:+{+id:+segments[1]+},
++++++++++++};
++++++++}
++++++++return+<UrlMatchResult>(null+as+any);
++++}
++++return+<UrlMatchResult>(null+as+any);
+}|code-block|syntax|javascript|2678753|然后在路由配置中使用匹配器：|2678754|const+routes:+Routes+=+[
++++{
++++++++matcher:+userPageMatcher,
++++++++component:+User,
++++}
];|2678755|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/5214900/rerezz|1|https://stackoverflow.com/a/34398428/664533^0|B|6|0|I|F|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|19|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1B|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

The suggested answers here, including the <a href="https://stackoverflow.com/a/34398428/664533">accepted answer</a> from <a href="https://stackoverflow.com/users/5214900/rerezz">rerezz</a> which suggest adding multiple route entries work fine.

However the component will be recreated when changing between the route entries, i.e. between the route entry with the parameter and the entry without the parameter. 

If you want to avoid this, you can create your own route matcher which will match both routes:

<pre><code>export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
 if (segments.length &gt; 0 &amp;&amp; segments[0].path === 'user') {
 if (segments.length === 1) {
 return {
 consumed: segments,
 posParams: {},
 };
 }
 if (segments.length === 2) {
 return {
 consumed: segments,
 posParams: { id: segments[1] },
 };
 }
 return &lt;UrlMatchResult&gt;(null as any);
 }
 return &lt;UrlMatchResult&gt;(null as any);
 }
</code></pre>

Then use the matcher in your route config:

<pre><code>const routes: Routes = [
 {
 matcher: userPageMatcher,
 component: User,
 }
];
</code></pre>

blocks|key|121977|text|面对类似的延迟加载问题，我这样做了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|121978|const+routes:+Routes+=+[
++{
++++path:+'users',
++++redirectTo:+'users/',
++++pathMatch:+'full'
++},
++{
++++path:+'users',
++++loadChildren:+'./users/users.module#UserssModule',
++++runGuardsAndResolvers:+'always'
++},
[...]|code-block|syntax|javascript|121979|然后在组件中：|121980|++ngOnInit()+{
++++this.activatedRoute.paramMap.pipe(
++++++switchMap(
++++++++(params:+ParamMap)+=>+{
++++++++++let+id:+string+=+params.get('id');
++++++++++if+(id+==+"")+{
++++++++++++return+of(undefined);
++++++++++}
++++++++++return+this.usersService.getUser(Number(params.get('id')));
++++++++}
++++++)
++++).subscribe(user+=>+this.selectedUser+=+user);
++}|121981|这样：|121982|121983|不带/的路由被重定向到带有的路由。由于pathMatch:+'full'，只有这种特定的完整路由is+redirected.|unordered-list-item|offset|length|style|CODE|121984|Then，users/:id才会被接收。如果实际路由是users/，则id为""，因此在ngOnInit中检查它并执行相应操作；否则，id是id并继续。|121985|其余组件作用于selectedUser是否未定义(*ngIf等)。|121986|<代码>F218|121987|entityMap^0|0|0|0|0|0|0|2|1|J|H|0|5|9|R|6|Z|2|12|2|18|8|1V|2|0|7|C|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|18|8|@$Q|19|R|1A|S|T]|$Q|1B|R|1C|S|T]]|9|@]|A|$]]|$1|U|3|V|5|P|7|1D|8|@$Q|1E|R|1F|S|T]|$Q|1G|R|1H|S|T]|$Q|1I|R|1J|S|T]|$Q|1K|R|1L|S|T]|$Q|1M|R|1N|S|T]|$Q|1O|R|1P|S|T]]|9|@]|A|$]]|$1|W|3|X|5|P|7|1Q|8|@$Q|1R|R|1S|S|T]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1T|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|11|$]]

Facing a similar problem with lazy loading I have done this:

<pre><code>const routes: Routes = [
 {
 path: 'users',
 redirectTo: 'users/',
 pathMatch: 'full'
 },
 {
 path: 'users',
 loadChildren: './users/users.module#UserssModule',
 runGuardsAndResolvers: 'always'
 },
[...]
</code></pre>

And then in the component:

<pre><code> ngOnInit() {
 this.activatedRoute.paramMap.pipe(
 switchMap(
 (params: ParamMap) =&gt; {
 let id: string = params.get('id');
 if (id == "") {
 return of(undefined);
 }
 return this.usersService.getUser(Number(params.get('id')));
 }
 )
 ).subscribe(user =&gt; this.selectedUser = user);
 }
</code></pre>

This way:

<ul>
<li>The route without <code>/</code> is redirected to the route with. Because of the <code>pathMatch: 'full'</code>, only such specific full route is redirected.</li>
<li>Then, <code>users/:id</code> is received. If the actual route was <code>users/</code>, <code>id</code> is <code>""</code>, so check it in <code>ngOnInit</code> and act accordingly; else, <code>id</code> is the id and proceed.</li>
<li>The rest of the componect acts on <code>selectedUser</code> is or not undefined (*ngIf and the things like that).</li>
</ul>

blocks|key|2890606|text|使用此匹配器函数，您可以获得所需的行为，而无需重新渲染组件。当url.length等于0时，没有可选参数，当url.length等于1时，有1个可选参数。id+-是可选参数的名称。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2890607|++const+routes:+Routes+=+[
++{
++++matcher:+(segments)+=>+{
++++++if+(segments.length+<=+1)+{
++++++++return+{
++++++++++consumed:+segments,
++++++++++posParams:+{
++++++++++++id:+new+UrlSegment(segments[0]?.path+%7C%7C+'',+{}),
++++++++++},
++++++++};
++++++}
++++++return+null;
++++},
++++pathMatch:+'prefix',
++++component:+UserComponent,
++}]|code-block|syntax|javascript|2890608|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|$]]

With this matcher function you can get desirable behavior without component re-rendering. When url.length equals to 0, there's no optional parameters, with url.length equals to 1, there's 1 optional parameter. id - is the name of optional parameter.
<pre><code> const routes: Routes = [
 {
 matcher: (segments) =&gt; {
 if (segments.length &lt;= 1) {
 return {
 consumed: segments,
 posParams: {
 id: new UrlSegment(segments[0]?.path || '', {}),
 },
 };
 }
 return null;
 },
 pathMatch: 'prefix',
 component: UserComponent,
 }]
</code></pre>

blocks|key|2678833|text|在Angular+8中，您可以简单地添加参数，而无需更改路由器配置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2678834|Angular+Doc+Optional+param|offset|length|2678835|在yourModule.routing.module.ts中|2678836|const+routes:+Routes+=+[
++{+path:+'somePath/:RequiredParam',+component:+Yourcomponent+}
];|code-block|syntax|javascript|2678837|在您的模板中：|2678838|<div+[RouterLink]+=+['somePath',+requiredParamValue,+{optionalParam:+value}]></div>|2678839|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/guide/router-tutorial-toh#navigating-back-to-the-list-component^0|0|0|Q|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

In Angular 8, ou can simply add the parameter without changing your router config.
<a href="https://angular.io/guide/router-tutorial-toh#navigating-back-to-the-list-component" rel="nofollow noreferrer">Angular Doc Optional param</a>
In yourModule.routing.module.ts
<pre><code>const routes: Routes = [
 { path: 'somePath/:RequiredParam', component: Yourcomponent }
];
</code></pre>
In your template :
<pre><code>&lt;div [RouterLink] = ['somePath', requiredParamValue, {optionalParam: value}]&gt;&lt;/div&gt;
</code></pre>

blocks|key|2678859|text|在主详细视图中也出现了同样的问题。主视图可以在没有:elementId参数的情况下可见，但在打开详细信息选择并在url中使用:elementId的情况下仍应显示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2678860|我的解决方法如下：|2678861|const+routes:+Routes+=+[
++{
++++path:+'',
++++component:+MasterDetailComponent,
++++children:+[
++++++{
++++++++path:+':elementId',
++++++++children:+[
++++++++++{
++++++++++++path:+'details',
++++++++++++component:+DetailComponent
++++++++++},
++++++++++{
++++++++++++path:+'',
++++++++++++redirectTo:+'details'
++++++++++}
++++++++]
++++++}
++++]
++}
];|code-block|syntax|javascript|2678862|然后在MasterDetailComponent中(例如在ngOnInit方法中)，您可以使用子路由获取:elementId：|2678863|const+childRouteWithElementId+=+this.route.snapshot.children[0];
const+elementIdFromUrl+=+childRouteWithElementId.params.elementId;
if+(!!elementIdFromUrl+)+{
++//+Do+what+you+need+to+with+the+optional+parameter
}|2678864|当然，您也可以在没有子路由的情况下做同样的事情，只在url的末尾有可选的elementId。|2678865|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Had the same issue with a Master Detail view. The master view can be visible without the :elementId parameter, but should still be displayed with detail selection open and with the :elementId in the url.
I solved it as follows:
<pre><code>const routes: Routes = [
 {
 path: '',
 component: MasterDetailComponent,
 children: [
 {
 path: ':elementId',
 children: [
 {
 path: 'details',
 component: DetailComponent
 },
 {
 path: '',
 redirectTo: 'details'
 }
 ]
 }
 ]
 }
];
</code></pre>
Then in MasterDetailComponent (e.g. in ngOnInit method) you can get the :elementId using the child route:
<pre><code>const childRouteWithElementId = this.route.snapshot.children[0];
const elementIdFromUrl = childRouteWithElementId.params.elementId;
if (!!elementIdFromUrl ) {
 // Do what you need to with the optional parameter
}
</code></pre>
Of course you could do the same thing without the child routes and only have the optional elementId at the end of the url.

blocks|key|124738|text|通过路由将路由参数从一个组件发送到其他组件有三种方式。但首先在组件相关的.ts文件中导入这些库，并在构造函数中定义|type|unstyled|depth|inlineStyleRanges|entityRanges|data|124739|private+route:+ActivatedRoute
private+router:+Router|code-block|syntax|javascript|124740|第一种方式:必填路由参数|offset|length|style|BOLD|124741|//Route+Configuration
{path:+'user/:id',+component:+UserDetailComponent}

//Set+Hyperlink/routerLink
<a+[routerLink]="['/user',+user.id]"></a>+

+//Requesting+Url+after+click+on+hyperlink
+http://localhost:4200/user/6

//Now+you+can+read+id+value+in+navigated+component
this.route.snapshot.paramMap.get('id');|124742|第二种方式:可选路径参数|124743|//Route+Configuration
++++{path:+'user',+component:+UserDetailComponent}
++++
++++//Set+Hyperlink/routerLink
++++<a+[routerLink]=['/user',+{name:+userName,+status:+true}]"></a>


//Requesting+Url+after+click+on+hyperlink
++++http://localhost:4200/user;name:userNameValue;status:true

//Now+you+can+read+values+in+navigated+component
++++this.route.snapshot.paramMap.get('userId');
++++this.route.snapshot.paramMap.get('userName');|124744|第三种方式:可选路径参数|124745|//Route+Configuration
++++{path:+'user',+component:+UserDetailComponent}
++++
++++//Set+Hyperlink/routerLink
++++<a+[routerLink]="['/user']"++[queryParms]="{userId:'911',+status:true}"></a>

++++//Requesting+Url+after+click+on+hyperlink
++++http://localhost:4200/user?userId=911&status=true

++++
++++//Now+you+can+read+values+in+navigated+component
++++this.route.snapshot.paramMap.get('userId');
++++this.route.snapshot.paramMap.get('userName');|124746|参考：https://qastack.mx/programming/44864303/send-data-through-routing-paths-in-angular|124747|entityMap|0|LINK|mutability|MUTABLE|url|https://qastack.mx/programming/44864303/send-data-through-routing-paths-in-angular^0|0|0|0|C|0|0|0|C|0|0|0|C|0|0|3|2A|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|18|8|@$I|19|J|1A|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1C|8|@$I|1D|J|1E|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1F|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1G|8|@$I|1H|J|1I|K|L]]|9|@]|A|$]]|$1|U|3|V|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1K|8|@]|9|@$I|1L|J|1M|1|1N]]|A|$]]|$1|Y|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

There are three ways to send route parameter(s) from one component to other component through routes. But first import these libraries in components related .ts files and define in constructor
<pre><code>private route: ActivatedRoute
private router: Router
</code></pre>
1st Way: Required routing parameters
<pre><code>//Route Configuration
{path: 'user/:id', component: UserDetailComponent}

//Set Hyperlink/routerLink
&lt;a [routerLink]=&quot;['/user', user.id]&quot;&gt;&lt;/a&gt; 

 //Requesting Url after click on hyperlink
 http://localhost:4200/user/6

//Now you can read id value in navigated component
this.route.snapshot.paramMap.get('id');
</code></pre>
2nd Way: Optional path parameters
<pre><code>//Route Configuration
 {path: 'user', component: UserDetailComponent}
 
 //Set Hyperlink/routerLink
 &lt;a [routerLink]=['/user', {name: userName, status: true}]&quot;&gt;&lt;/a&gt;


//Requesting Url after click on hyperlink
 http://localhost:4200/user;name:userNameValue;status:true

//Now you can read values in navigated component
 this.route.snapshot.paramMap.get('userId');
 this.route.snapshot.paramMap.get('userName');
</code></pre>
3rd Way: Optional path parameters
<pre><code>//Route Configuration
 {path: 'user', component: UserDetailComponent}
 
 //Set Hyperlink/routerLink
 &lt;a [routerLink]=&quot;['/user']&quot; [queryParms]=&quot;{userId:'911', status:true}&quot;&gt;&lt;/a&gt;

 //Requesting Url after click on hyperlink
 http://localhost:4200/user?userId=911&amp;status=true

 
 //Now you can read values in navigated component
 this.route.snapshot.paramMap.get('userId');
 this.route.snapshot.paramMap.get('userName');
</code></pre>
Reference: <a href="https://qastack.mx/programming/44864303/send-data-through-routing-paths-in-angular" rel="nofollow noreferrer">https://qastack.mx/programming/44864303/send-data-through-routing-paths-in-angular</a>

Is it possible to have an optional route parameter in the Angular 2 route? I tried the Angular 1.x syntax in RouteConfig but received below error: 

<blockquote>
 "ORIGINAL EXCEPTION: Path "/user/:id?" contains "?" which is not allowed in a route config."
</blockquote>

<pre><code>@RouteConfig([
{
 path: '/user/:id?',
 component: User,
 as: 'User'
}])
</code></pre>

Angular 2 optional route parameter

路由器

路由

在Angular 2路由中可以有一个可选的路由参数吗？我在RouteConfig中尝试了Angular 1.x语法，但收到以下错误：“原始异常:路径”/用户/:id？“包含"?”，这在路由配置中是不允许的。“@RouteConfig([{    path: '/user/:id?',    component: Use...

问角度2可选路由参数
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度2可选路由参数EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度2可选路由参数
EN