Angular logi c в функциональном модуле - PullRequest
Новая
       22

Angular logi c в функциональном модуле

0 голосов
/ 23 января 2020

Предположим, что у меня есть эти маршруты в моем модуле feat 

const routes: Routes = [
  {
    path: 'create',
    component: CreateAnnouncementComponent
  },
  {
    path: 'edit/:id',
    component: CreateAnnouncementComponent
  },
  {
    path: 'list',
    component: AnnouncementListComponent
  }
];

Этот модуль feat импортирован из home-routing.module

{
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'announcement',
        loadChildren: () => import('../announcement/announcement.module').then(mod => mod.AnnouncementModule)
      }
    ]
  }

Итак, у нас есть маршруты типа '/ home / announce / create' et c

Из CreateAnnouncementComponent Я хочу перейти к AnnouncementListComponent, но CreateAnnouncementComponent доступен с двух разных маршрутов, / create и / edit /: id . Это не позволит мне использовать относительную навигацию, например: 

this.router.navigate(['../list'], {relativeTo: this.activeRoute});

, потому что в случае редактирования новый маршрут будет / announcement / edit / list вместо / announce / list, так как ': id' в URL добавляет один уровень к маршруту.

Вопрос: как я могу дать announcmenetCreateComponent команду перейти к маршруту «список» без использования абсолютного пути, такого как «дом / объявление» / list 'и без реализации logi c для чтения и разделения фактического пути?

1 Ответ

0 голосов
/ 23 января 2020

Вы можете атаковать это с другого направления, используя Angular 's Местоположение Утилита. 

import { Location } from '@angular/common';
import { Router } from '@angular/router';

...

constructor(
    private location: Location,
    private router: Router,
) {}

navigateToList () {
    const url = this.location.path().indexOf('edit') > -1
        ? '/announcement/edit/list' : '/announcement/list';
    this.router.navigate([url], { relativeTo: this.activeRoute });
}
...