Question

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

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

成功插入数据库后，该ID从PHP发送回.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}}]);

但是仍然重定向到`registration组件。

请注意，控制台上没有错误。

在“网络”标签上：

编辑

完整的路由脚本：

第一个路由模块（父级）：

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（['/ dashboard / registration / unit / addHH'， id]）;

有关每种导航类型以及使用不同导航方法时要使用的路径的详细答案，请参阅堆栈溢出时的this answer，用户对此进行了以下解释：

您将绝对路径放置到您想要的组件的URL   导航到。

注意：呼叫路由器的路由器时，请务必指定完整的绝对路径   navigationByUrl方法。绝对路径必须以/开头
// 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]);

找不到URL的Angular 6路由重定向到原始组件

2 个答案: