在Angular 2的路由中可以有一个可选的路由参数吗?我尝试了Angular 1。但是在routecconfig中收到如下错误:
“ORIGINAL EXCEPTION: Path /user/:id?”包含“?”,这在路由配置中是不允许的。
@RouteConfig([
{
path: '/user/:id?',
component: User,
as: 'User'
}])
在Angular 2的路由中可以有一个可选的路由参数吗?我尝试了Angular 1。但是在routecconfig中收到如下错误:
“ORIGINAL EXCEPTION: Path /user/:id?”包含“?”,这在路由配置中是不允许的。
@RouteConfig([
{
path: '/user/:id?',
component: User,
as: 'User'
}])
当前回答
在Angular 8中,你可以在不改变路由器配置的情况下简单地添加参数。
可选参数
在yourModule.routing.module.ts
const routes: Routes = [
{ path: 'somePath/:RequiredParam', component: Yourcomponent }
];
在模板中:
<div [RouterLink] = ['somePath', requiredParamValue, {optionalParam: value}]></div>
其他回答
{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}
这样,在添加参数时就不会重新呈现组件。
你可以定义多个带参数和不带参数的路由:
@RouteConfig([
{ path: '/user/:id', component: User, name: 'User' },
{ path: '/user', component: User, name: 'Usernew' }
])
并在组件中处理可选参数:
constructor(params: RouteParams) {
var paramId = params.get("id");
if (paramId) {
...
}
}
参见相关的github问题:https://github.com/angular/angular/issues/3525
使用angular4,我们只需要在层次中组织路由
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
}
];
这对我很有用。这样路由器就可以根据选项id参数知道下一个路由是什么。
通过路由将路由参数从一个组件发送到另一个组件有三种方式。但是首先要将这些库导入到与.ts文件相关的组件中,并在构造函数中进行定义
private route: ActivatedRoute
private router: Router
第一种方式:必需的路由参数
//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');
第二种方式:可选路径参数
//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');
第三种方式:可选路径参数
//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');
参考:https://qastack.mx/programming/44864303/send-data-through-routing-paths-in-angular
遇到了这个问题的另一个例子,为了寻找解决方案,我来到了这里。我的问题是,我正在做的孩子,和惰性加载组件以及优化事情一点。简而言之,如果你懒于加载父模块。主要的事情是我在路线中使用'/:id',它抱怨'/'是它的一部分。这不是真正的问题,但它适用。
从父应用程序路由
...
const routes: Routes = [
{
path: '',
children: [
{
path: 'pathOne',
loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
},
{
path: 'pathTwo',
loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
},
...
子路由惰性加载
...
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: OverviewComponent
},
{
path: ':id',
component: DetailedComponent
},
]
}
];
...