Angular 6: Search specific word in the current route

Question

I have this routing table:

// Routing array - set routes to each html page
const appRoutes: Routes = [
  { path: '', redirectTo: '/courses', pathMatch: 'full' },
  { path: 'courses', component: CourseListComponent,  pathMatch: 'full'},
  { path: 'courses/:id', component: CourseDetailComponent, pathMatch: 'full' },
  { path: 'courses/:id/unit/:unitId', component: CoursePlayComponent,
    children: [
      { path: '', component: CourseListComponent },
      { path: 'lesson/:lessonId', component: CourseLessonComponent, data: 'lesson },
      { path: 'quiz/:quizId', component: CourseQuizComponent, data: 'quiz, }
  ]},
  { path: '**', component: PageNotFoundComponent, pathMatch: 'full' }];

//Course-Play.component
     
     constructor(private courseService: CourseService,
          private route: ActivatedRoute,
          private router: Router,
          public sanitizer: DomSanitizer) {
            route.url.subscribe(() => {
                console.log(route.snapshot.children.data); }); // <-- undefined
          }
          
     ngOnInit() {
     
     // this is what I want to do but I don't know how
     if (this.route.snapshot.children.data == 'lesson) {
        // activate lesson children
      }
      else {
        // activate quiz children
       }
     
     }

In ngOnInit in course-play I want to know if the route is lesson/:lessonId or quiz/:quizId. I only need to know if there's lesson or quiz in the route and then activate different child. I know how to do it with params (with route.snapshot) but not with a static text.

EDIT: tried to use data but it's not working

Instead of searching for a specific text, have you considered using the route's `data` attribute? It's still using route.snapshot, though it's a better approach than searching for a string, especially when variables are part of a route. See https://stackoverflow.com/questions/43806188/how-can-i-access-an-activated-child-routes-data-from-the-parent-routes-compone — naeramarth7, Oct 07 '18 at 08:37
I'll see, but I use mat-sidebar and the body is change depends on the children. Lessons are working but the quiz not. when I enter this route "courses/3/unit/1/quiz/1 it's loading a lesson and not a quiz. When I click on the quiz in the side-bar the quiz appear below the lesson instead only the quiz in the body — Ofir Sasson, Oct 07 '18 at 08:40
I tried to do this but it's said it's undefined (I added to the table root data also) : route.url.subscribe(() => { console.log(route.snapshot.children.data); }); — Ofir Sasson, Oct 07 '18 at 08:56

Jeto · Answer 1 · 2018-10-07T09:05:09.820

1

Here's a possible approach (within your component's ngOnInit), this.route being injected to your constructor as an ActivatedRoute:

import { ActivatedRoute, UrlSegment } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.url.subscribe((urlSegments: UrlSegment[]) => {
    switch (urlSegments[4].path) {
      case 'lesson':
        // ...
        break;
      case 'quiz':
        // ...
    }
  });
}

Edit: just realized you're using children components, I'm not sure how the segments behave in that case. Give it a try, I'll delete this answer if this can't work.

edited Oct 07 '18 at 09:05

answered Oct 07 '18 at 08:39

Jeto

14,596
2
32
46

what is Fragments and UrlSegments? – Ofir Sasson Oct 07 '18 at 09:01
Sorry, by fragments I also meant segments. Segments are parts/of/the/route/URL. – Jeto Oct 07 '18 at 09:05
I'll try use what you wrote and tell you if it's working. I tried use data in routing table and access children.data but it was undefined. I edited the source code also – Ofir Sasson Oct 07 '18 at 09:07
Sure, feel free to `console.log(urlSegments)` to see what it looks like. You might need to make some small adjustments. – Jeto Oct 07 '18 at 09:09
it didn't work, it's said that: TpeError: Cannot read property 'path' of undefined. what the index represent? and what the subscribe? maybe the index isn't right? – Ofir Sasson Oct 07 '18 at 09:12
Yeah the index might be wrong as I'm a bit unfamiliar with children routes; try using `console.log` to see what `urlSegments` contains. Or `urlSegments.forEach(urlSegment => console.log(urlSegment.path));`. – Jeto Oct 07 '18 at 09:13
it seems that urlSegments[1].path = 3 but from there the others are undefined and urlSegments.path = undefined – Ofir Sasson Oct 07 '18 at 09:16
ok so urlSegments[1] = 3, urlSegments[2] = unit, urlSegments[3] = 2 but 4 and 5 are giving me error – Ofir Sasson Oct 07 '18 at 09:19
1

OK then it seems like the subroute's segments are not available here, so this won't work. Sorry about that! – Jeto Oct 07 '18 at 09:20
that's ok you tried to help :) do you know how to work with the data field in routing table? I tried using that but it's undefined :( in the angular site they don't use examples with that – Ofir Sasson Oct 07 '18 at 09:21
[This](https://stackoverflow.com/questions/43806188/how-can-i-access-an-activated-child-routes-data-from-the-parent-routes-compone) may help. – Jeto Oct 07 '18 at 09:25
I read this but I didn't understand the solution. why I can't just use children.data? why all this code? I'm using Angular 6 so maybe there's code that irrelevant to me. I'll edit the code because I added some stuff – Ofir Sasson Oct 07 '18 at 09:32

Angular 6: Search specific word in the current route

1 Answers1