No sure what I am missing , I have a child rout and the parameter always undefined...however, it does load the right component but somehow the parameters are not being read. ( I do see the parameters on the url)
app rout
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 { }
search rout
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 (I tried both snapshot an observable)
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 { }
The problem being params
not received in your SearchComponent
is that, the parent
route and the child
route are both pointing to the same component
.
Angular is loading the component for parent
route (without params), but the url still points to the child
route, because angular has found a route configured against it, but failed to load since it did not find any router-outlet
inside parent.
Instead of making a child
route, make it as a sibling route to the parent
route. It just loads fine.
You may reconfigure your routes this way
{ path: 'search', component : SearchComponent, pathMatch : 'prefix'},
{ path: 'search/:id/:name', component: SearchComponent }
See this stackblitz for your reference
EDIT :
It does work with your current routes if you add <router-outlet>
in SearchComponent
, but that will load same component in nest. One for parent and one for child.
Instead you can create another root component for SearchModule
as DummyComponent
, activating it for parent route and then load all the child components inside it.