Параметры дочерних маршрутов не определены - PullRequest
Новая
       24

Параметры дочерних маршрутов не определены

0 голосов
/ 29 июня 2018

Не уверен, что мне не хватает, у меня есть дочерний маршрут, и параметр всегда неопределен ... однако он загружает нужный компонент, но каким-то образом параметры не читаются. (Я вижу параметры в URL)

приложение Route 

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

1 Ответ

0 голосов
/ 29 июня 2018

Проблема в том, что 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, активировать его для родительского маршрута и затем загрузить все дочерние компоненты внутри него.

...