角度 - 将附加参数传递到具有路由的下一个组件

Question

我想知道如何将其他参数传递到下一页，而不是仅使用 ：id。

当前工作代码

来源页面(电子邮件模板(

addEmailTemplate(){
this.router.navigate(['email-template','new','email-template-details']);
}

登陆页面：

this.route.params.forEach((urlParameters) => {
this.emailId = urlParameters['id'];
});

定义的路线：

const routes: Routes = [
{
path: '',
component: EmailTemplateComponent,
data: {
title: 'Email Template'
}
},
{
path: ':id/email-template-details',
component: EmailTemplateDetailsComponent,
children: [
{ path: '', redirectTo: 'email-template', pathMatch: 'full'},
{ path: '', component: EmailTemplateDetailsComponent, data: {title: 'Email Template Details'}}
]
},
];

导入路由器：

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

我想实现的目标

源页面(电子邮件模板(，此代码不起作用：

addEmailTemplate(){
this.router.navigate([
'email-template',
{id:'new',type:'newType'},
'email-template-details'
]);
}

登陆页面(电子邮件模板详细信息(：

I don know how to catch the "type" and "id". Expected to get "newType" from Origin Page

Answer 1

您可以使用路由解析。

路由解析

Answer 2

听起来像是本地存储的一个很好的用例。

addEmailTemplate(){
localStorage.setItem('myData', JSON.stringify({id:'new',type:'newType'})
this.router.navigate([yourUrl]);
}

然后在您路由到的页面上：

getData() {
return localStorage.getItem(JSON.parse('myData'));
}