I've got this (main parent) component -
@RouteConfig([
{ path: '/', name: 'ProjectList', component: ProjectListComponent, useAsDefault: true },
{ path: '/new', name: 'ProjectNew', component: ProjectFormComponent },
{ path: '/:id', name: 'ProjectDetail', component: ProjectDetailComponent },
{ path: '/:id/issues/...', name: 'Issue', component: IssueMountComponent },
])
class ProjectMountComponent {
}
And then I've got the second mount component (child of main parent, parent of the next component)
@Component({
template: `
<div><router-outlet></router-outlet></div>
`,
directives: [RouterLink, RouterOutlet]
})
@RouteConfig([
{ path: "/", name: "IssueList", component: IssueListComponent, useAsDefault: true },
])
class IssueMountComponent {
constructor(private _routeParams: RouteParams) {
}
}
Here I can access the routeParams (:id) without any problem. Now, here's the component where I need the value of :id
from the uri.
@Component({
template: `
<h3>Issue List</h3>
<ul>
<issue-component *ngFor="#issue of issues" [issue]="issue"></issue-component>
</ul>
`,
directives: [IssueComponent],
providers: [IssueService]
})
class IssueListComponent implements OnInit {
issues: Issue[];
constructor(private _issueService: IssueService,
private _routeParams: RouteParams) {}
getIssues() {
let id = this._routeParams.get('id');
console.log(this._routeParams);
this._issueService.getIssues(id).then(issues => this.issues = issues);
}
ngOnInit() {
this.getIssues();
}
}
In this component, I cannot access the value of the :id
route parameter. It's always null. What am I doing wrong?
Here's the component hierarchy -
ProjectMountComponent -> IssueMountComponent -> IssueListComponent