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

您可以使用路线解析。

route resolve

Answer 2

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

<div id="app">
    <div v-if="display_div">Test</div>
    <input type="button" value="Toggle Collapse" v-on:click="toggleDiv()"/>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            display_div: false
        },
        methods: {
            toggleDiv: function() {
                this.display_div = !this.display_div;
            }
        }
    });
</script>

然后在页面上您转到：

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

Angular - 通过路径将其他参数传递给下一个组件

2 个答案: