Angular — передать дополнительные параметры следующему компоненту с маршрутом

Я хотел бы знать, как передать дополнительные параметры на следующую страницу вместо использования только :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

angular angular-routing angular-router angular5
person Jerry    schedule 11.05.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать разрешение маршрута.

разрешение маршрута

person Franklin Pious    schedule 11.05.2018
comment
Привет, Франклин, можешь привести пример, как это применить? я еще новичок - person Jerry; 11.05.2018

arrow_upward
0
arrow_downward

Звучит как хороший вариант использования локального хранилища.

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

Затем на странице, на которую вы перешли:

getData() {
  return localStorage.getItem(JSON.parse('myData'));
}
person Austin    schedule 11.05.2018