子路由参数未定义

Question

不确定我遗漏了什么，我有一个子路由并且参数始终未定义...但是，它确实加载了正确的组件但不知何故没有读取参数。（我确实在 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 { }

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

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

        });

search.module

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

app.module

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已找到针对它配置的路由，但未能加载，因为它在 parent.

中未找到任何 router-outlet

与其制作 child 路线，不如将其作为 parent 路线的兄弟路线。它加载得很好。

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

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

看到这个stackblitz供您参考

编辑：

如果您在 SearchComponent 中添加 <router-outlet>，它确实适用于您当前的路线，但这会在 nest 中加载相同的组件。一份用于 parent，一份用于 child。

相反，您可以为 SearchModule 创建另一个根组件作为 DummyComponent，为 parent 路由激活它，然后在其中加载所有 child 组件。

子路由参数未定义

Child Rout Params is undefined

angular

typescript

routing

angular-ui-router