子路由参数未定义

Question

不确定我缺少什么，我有一个子路由，并且参数始终未定义......但是，它确实加载了正确的组件，但不知何故，参数没有被读取。 （我确实看到了网址上的参数）

应用程序路由

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（我尝试了两个快照和可观察的）

console.log('id ===========>' + this._rout.snapshot.params['id']);
        this._rout.params.subscribe(params => {
            console.log('id2 ===========>' + params['id']);

        });

搜索模块

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

Answer 1

您的

params

中未收到

SearchComponent

的问题是，

parent

路线和

child

路线都指向同一个

component

。

Angular 正在加载

parent

路由的组件（不带参数），但 url 仍然指向

child

路由，因为 Angular 已找到针对其配置的路由，但由于没有找到任何

router-outlet，因此加载失败

在父级内部。

不要创建

child

路线，而是将其作为

parent

路线的同级路线。它加载得很好。

您可以通过这种方式重新配置您的路线

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

请参阅此stackblitz供您参考

编辑：

如果您在

<router-outlet>

中添加

SearchComponent

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

相反，您可以为

SearchModule

创建另一个根组件作为

DummyComponent

，将其激活为父路由，然后加载其中的所有子组件。

Answer 2

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

我能够通过这样做解决问题