Angular 子路由参数未定义

不知道我遗漏了什么，我有一个子路由，参数始终未定义…然而，它确实加载了正确的组件，但不知何故，参数没有被读取。（我确实看到url上的参数）

应用程序路由

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

// these would equal welcome component

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent }
];

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

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SearchComponent } from '../search/search.component';


const routes: Routes = [

    { path: 'search', component: SearchComponent,

        children: [

            { path: ':id/:name', component: SearchComponent }
        ]

    },
];

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

搜索路线

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';

// these would equal welcome component

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent }
];

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

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SearchComponent } from '../search/search.component';


const routes: Routes = [

    { path: 'search', component: SearchComponent,

        children: [

            { path: ':id/:name', component: SearchComponent }
        ]

    },
];

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

search.component（我尝试了快照和可观察快照）

搜索模块

import { NgModule } from '@angular/core';
import { SearchComponent } from '../search/search.component'
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
from '@angular/forms';
import { SearchRoutingModule } from './search.routing';


@NgModule({

    imports: [HttpModule, BrowserModule,  SearchRoutingModule


    ],
    declarations: [SearchComponent],
    providers: [SearchService],
    exports: []

})
export class SearchModule { }

应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
import { HttpModule } from '@angular/http';
import { CommonModule } from '@angular/common';
import { SearchModule } from './search/search.module';


@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule, HttpModule, SearchModule, AppRoutingModule, CommonModule
    ],
    providers: [AppComponentService],
    bootstrap: [AppComponent]

})
export class AppModule { }

---

您的

SearchComponent

中未接收到

params

的问题在于

parent

路由和

child

路由都指向同一

组件

Angular正在加载
父路由的组件（不带参数），但url仍然指向
子路由，因为Angular已找到针对其配置的路由，但未能加载，因为它在父路由中未找到任何
路由器出口

不要创建一个
子路由
路由，而是将其作为到
父路由
的同级路由。很好

您可以这样重新配置您的路线

{ path: 'search', component : SearchComponent, pathMatch : 'prefix'}, 
{ path: 'search/:id/:name', component: SearchComponent }

请看这个以供参考

编辑：

如果您在
SearchComponent
中添加
，它确实适用于您当前的路由，但这将在嵌套中加载相同的组件。一个给父母，一个给孩子

相反，您可以为
SearchModule
创建另一个根组件作为
DummyComponent
，为父路由激活它，然后加载其中的所有子组件。
如果您
console.log（this.\u rout.snapshot.params）
，是否打印了任何内容？StackBlitz的任何更改都会复制此问题？如果我打印（此_rout.snapshot.params）我会得到[object object object]对不起，如果您在记录它之前将它
JSON.stringify
怎么办？对不起，没有跟随！你想让我记录什么？
console.log（JSON.stringify（this.\u rout.snapshot.params））
我已经尝试过该解决方案，它确实有效……但是，我正在尝试清理应用程序，因为我们有许多模块和路由。我真的很想使用child，因为我的下一步是使用Lazy loading如果你想保持相同的配置，那么你必须在searchComponent中添加
路由器出口
，以加载子路由。但在这种情况下，您的搜索组件将只加载到searchcomponent内部。一个用于家长，一个用于孩子检查更新的答案和更新的stackblitz演示，以便为家长使用虚拟根组件。我已经说过，不能将父路由和子路由指向同一组件。这就是你的代码问题。正在加载的组件用于父路由（不带参数），因为父路由组件没有
。当您点击子路由时，url仍然保持不变，因为angular找到了针对它配置的路由，但由于在父路由中未找到任何
路由器出口
，因此无法加载。简单的解决方案是为
SearchModule
的父路由添加根组件。并在其中添加
路由器出口
，以加载子路由，您可以在其中查看路由器参数。