Угловая маршрутизация 6 перенаправлена ​​на оригинальный компонент, так как URL не найден

Question

У меня проблема с маршрутизацией. Я нахожусь в компоненте блока, добавляющем новый блок в мою базу данных. URL выглядит следующим образом:

http://localhost:4200/dashboard/registration/unit

Когда вставка в мою базу данных прошла успешно, идентификатор отправляется обратно из PHP в метод .subscribe():

 .subscribe(
    (data)=>{
      console.log(data);

      //this.router.navigate(['unit/addH/'+data]);

    },
    (error)=>{
      console.log(error);
    }
  )

Мне нужно перенаправить в другой компонент напрямую, передав идентификатор, возвращенный мне через URL:

 .subscribe(
    (data)=>{
      console.log(data);

      this.router.navigate(['unit/addH/'+data]);

    },
    (error)=>{
      console.log(error);
    }
  )

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

Вот пути маршрутизации:

const routes: Routes = [
  {
    path: '',
    component: RegistrationComponent
  },
  {
    path: 'unit',
    component: UnitComponent
  },
  {
    path: 'unit/:unit_id',
    component: UnitEditComponent
  },
  {
    path: 'unit/addH/:uid',
    component: AddHComponent
  },
  {
    path: '**',
    redirectTo: 'registration',
    pathMatch: 'full'
  }
];

Я пытался использовать queryParams:

this.router.navigate(['unit/addH', {queryParams: {unit_id: data}}]);

Но все равно перенаправить на `компонент регистрации.

Обратите внимание, что в консоли нет ошибок.

На вкладке сети:

EDIT

Полный скрипт маршрутизации:

Первый модуль маршрутизации (родительский):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { AuthGuardService } from './auth-guard.service';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
    //canActivate: [AuthGuardService]
  },
  {
    path:'dashboard',
    loadChildren: '../app/dashboard/dashboard.module#DashboardModule'

  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Модуль панели приборов:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path:'',
    component: DashboardComponent,
    children: [
      {
        path:'',
        component: HomeComponent  
      },
      {
        path: 'home',
        loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'
      },
      {
        path: 'registration',
        loadChildren: './registration/registration.module#RegistrationModule'
      }
    ]
  },

  {
    path:'**',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Модуль регистрации:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegistrationComponent } from './registration.component';
import { UnitComponent } from './unit/unit.component';
import { UnitEditComponent } from './unit/unit-edit/unit-edit.component';
import { AddHouseholdComponent } from './unit/add-household/add-household.component';

const routes: Routes = [
  {
    path: '',
    component: RegistrationComponent
  },
  {
    path: 'unit',
    component: UnitComponent
  },
  {
    path: 'unit/:unit_id',
    component: UnitEditComponent
  },
  {
    path: 'unit/addH/:uid',
    component: AddHouseholdComponent
  },
  {
    path: '**',
    redirectTo: 'registration',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class RegistrationRoutingModule { }

Я перенаправлен на компонент входа в систему.

Answer 1

Вы должны указать, что хотите перейти к относительному маршруту, по которому вы звоните router.navigate. Это должно выглядеть так:

    this.router.navigate(['addH', id],{relativeTo:this.route});

Это будет означать, что вы переходите к: http://localhost:4200/dashboard/registration/unit/addH/?? Вместо перехода к: http://localhost:4200/unit/addH/??

Answer 2

Решение было путем добавления абсолютного пути при использовании navigate():

this.router.navigate ([ '/ панель / регистрация / блок / addHH', ID]);

Подробный ответ о каждом типе навигации и о том, какой путь будет использоваться при работе с различными методами навигации, см. этот ответ о переполнении стека, при котором пользователь объяснил его следующим образом:

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

Примечание. Всегда указывайте полный абсолютный путь при вызове маршрутизатора. метод navigateByUrl. Абсолютные пути должны начинаться с ведущего /

// Absolute route - Goes up to root level
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params
this.router.navigate(['/root/child', crisis.id]);

Answer 3

Прежде всего вам нужно преобразовать эту строку в целое число с помощью функции parseInt(), затем вы можете использовать следующий метод

let id= parseInt(data);
this.router.navigate(['unit/addH', id]);

ИЛИ

this.router.navigate(['/unit/addH', id]);

Надеюсь, это поможет.

Попытка определить маршруты таким образом

 {
 path: 'unit', component: UnitComponent
        children: [
            {path: '', component: UnitComponent},
            {path: 'unit/:unit_id', component: UnitEditComponent},
            {path: 'unit/addH/:id', component: AddHouseholdComponent}
        ]
    }