Angular routing with 2 path parameters in child-CodePudding

I'm currently having my Java course and have to deal with UI with Angular. That's why I can misunderstand some things. The structure of my application is following: some classroom has a list of announcements, and each announcement has list of comments. With http://localhost:4200/classrooms/3 I access the classroom page with its description and list of announcements. Then I want go to a separate announcement with http://localhost:4200/classrooms/3/announcements/7. In my app-routing I have this:

{ path: 'classrooms/:classroomId', component: ViewClassroomComponent,
     children : [{path: 'announcements/:announcementId', component: AnnouncementDetailsComponent}] }

This approach is wrong because when I go to the http://localhost:4200/classrooms/3/announcements/7 my AnnouncementDetailsComponent doesn't invoke. What is correct approach here? This is my routing function:

open(announcementId: number){
    this.router.navigate(['/classrooms/'   this.classroomId   '/announcements', announcementId]); 
  }

CodePudding user response：

Let me explain through code:

My router (you are using children which is ok too!):

  {
    path: 'users/:username/class/:classroom',
    component: ClassroomComponent
  }

The url:

/users/cris/class/coding

Here is a small example for you: https://angular-route-parameters-lmhcei.stackblitz.io/users/cris/class/coding

https://stackblitz.com/edit/angular-route-parameters-lmhcei?file=app/app-routing.module.ts

Seems you are missing one .this as well.

open(announcementId: number){
    this.router.navigate(['/classrooms/'   this.classroomId   '/announcements', this.announcementId]); 
  }