Ссылка на маршрутизатор в угловых 6, используя параметры запроса - PullRequest
Новая
       10

Ссылка на маршрутизатор в угловых 6, используя параметры запроса

0 голосов
/ 28 ноября 2018

У меня есть ссылка маршрутизатора, которая перемещается между страницами, и я отправляю параметры в URL, используя 

queryParamsHandling: "merge"

В некоторых ситуациях я хочу удалить определенный параметр из URL, но я не хочу потерять все параметры.

Мой URL выглядит так: http://localhost:4200/school/440404?SelectedTab=1&UserName=bat7

После маршрута я хочу удалить параметр SelectedTab bun, а не UserName Parameter.

URL-адрес будет выглядеть следующим образом:

http://localhost:4200/school/440404?UserName=bat7

код маршрутизатора находится в другом компоненте,

, который содержит кнопку возврата, которая выполняет маршрут, используя код: 

this.router.navigate([], { relativeTo: this.route, queryParamsHandling: "preserve" });

Есть идеи?

1 Ответ

0 голосов
/ 29 ноября 2018

Допустимая угловая стратегия навигации двух типов, одна - абсолютный путь, а вторая - относительный путь.

  1. Используя стратегию абсолютного пути, нам нужно написать жесткий код пути на уровне компонентов.
  2. Используя стратегию относительного пути, нам нужно написать путь только на уровне маршрута.

Для решения вопроса, пожалуйста, выполните следующие шаги.

Шаги 1: Объявите маршрутизацию 

const routes: Routes = [
  { path: '', redirectTo: '/school', pathMatch: 'full' },
  { path: 'school', component: DashboardComponent },
  { path: 'school/:SelectedTab/:UserName', component: SchoolComponent },
];

Шаг 2: Объявите метод для посещения школы в вашем первом компоненте, как показано ниже.Затем Вы получаете аналогичный URL-адрес, например

Например, http://localhost:4200/school/1/sa

goToSchool() {
    let object: any = {};
    object.SelectedTab = 1;
    object.UserName = 'sa';
    this.router.navigate([object.SelectedTab, object.UserName], { relativeTo: this.route});
  }

Шаг 3: После того как вы вернетесь из школы, вам нужно изменить URL-адрес, как показано ниже для получения кодатолько UserName

 GoBackFromSchool() {
    this.router.navigate(['../../'], { relativeTo: this.route, queryParams: { UserName: 'sa' } });
  }

например: http://localhost:4200/school?UserName=sa

...