11

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

Lordking
  • 1,413
  • 1
  • 13
  • 31

0 Answers0