由于找不到 url，Angular 6 路由重定向到原始组件

Question

我遇到了路由问题。我在单元组件中向我的数据库添加一个新单元。网址如下：

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

当插入到我的数据库成功时，从 PHP 将 id 发送回.subscribe() 方法：

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

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

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

我需要直接重定向到另一个组件，通过url获取我返回的id：

 .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}}]);

但仍然重定向到`注册组件。

请注意控制台没有错误。

在网络标签：

编辑

完整的路由脚本：

第一个路由模块（Parent）：

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

解决方法是在使用navigate()时添加绝对路径：

this.router.navigate(['/dashboard/registration/unit/addHH', id]);

关于每种导航的详细解答以及在使用不同导航方法时使用的路径，请参阅堆栈溢出的this answer，用户解释如下：

你把绝对路径放到你想要的组件的 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 2

您应该指定要导航到您调用router.navigate 的相对路径。它应该是这样的：

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

这意味着您正在导航到： http://localhost:4200/dashboard/registration/unit/addH/?? 而不是导航到： http://localhost:4200/unit/addH/??

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}
        ]
    }