Angular Router with children of same component

Question

This is my routes:

app.module.ts

const appRoutes: Routes = [
    { path: 'menu', component: MenuViewComponent,
      children: [
        { path: ':name', component: MenuViewComponent,
          children: [
            { path: ':name', component: MenuViewComponent ,
              children: [
                { path: ':name', component: MenuViewComponent }
              ]
            }
          ]
        }
      ]
    },
    { path: '',      component: LandingViewComponent},
    { path: '**', component: PageNotFoundViewComponent }
];

I have a service that returns this data structure used to make my menus

[
    "name" : "root1",
    "children" : [
            "name" : "folder1",
            "children" : [
                  "name" : "folder1_item1"
            ],
            "name" : "folder2",
            "children" : [
                  "name" : "folder2_item1"
            ]
    ],
    "name" : "root2",
    "children" : [
            "name" : "folder3",
            "children" : [
                  "name" : "folder3_item1"
            ],
            "name" : "folder4",
            "children" : [
                  "name" : "folder4_item1"
            ]
    ]
]

Inside of my MenuViewComponent I have an onInit method that loops through the children of the route and builds up the name variables as a path.

menu-view.component.ts

ngOnInit() {

    var path : string[] = [];
    var cont = this.route;
    var index : number = 0;

    do
    {
      cont.params.subscribe( params => {
        if(params)
          path[index] = params['name'];
      });
      index++;
      cont = cont.firstChild;
    }
    while(cont);

    this.myservice.getMenuItems(path).then(menuItems => this.menuCards = menuItems);
}

This path array is sent as a parameter to my get menu items method which will iterate through the tree and return the menu node and its children for that path.

The MenuViewComponent uses an ngFor to display n number of MenuCardComponents. Which each link to another menu if they have children using a button and the routerLink attribute.

My problem

It doesnt seem angular will update the MenuViewComponent when I click on one of the buttons. It will update the URL in the address bar, but the screen doesnt update. If I manually visit each url (for example: foo.com/menu/root1/folder1) it will display the correct menu choices its just I cant figure out how to make the route work with the button links.

From my understanding I need to somehow reinit MenuViewComponent. But I dont know how to do that.

Any help would be appreciated.

score 0 · Accepted Answer · answered Aug 08 '17 at 15:27

So this is what I ended up doing:

app.module.ts

const appRoutes: Routes = [
  { path: 'menu/:name1/:name2/:name3', component: MenuViewComponent },
  { path: 'menu/:name1/:name2', component: MenuViewComponent },
  { path: 'menu/:name1', component: MenuViewComponent },
  { path: 'menu', component: MenuViewComponent },
  { path: '',      component: LandingViewComponent},
  { path: '**', component: PageNotFoundViewComponent }
];

menu-view.component.ts

ngOnInit() {
    this.route.paramMap.switchMap((params: ParamMap) => {
    this.path = [];

    if(params.get('name1'))
    {
        this.path[0] = params.get('name1');

        if(params.get('name2'))
        {
            this.path[1] = params.get('name2');

            if(params.get('name3'))
            {
                this.path[2] = params.get('name3');
            }
        }
      }
      return this.menuService.getMenuItem(this.path);
    })
    .subscribe((menuNode: MenuCard[]) => this.menuCards = menuNode);
}

I would have preferred not to have to name each level differently (ie name1, name2, name3) and this still isnt the most efficient code out there, I would prefer something that is more dynamic and is able to handle N number of menu choices. But it worked for what I needed right now.

You could use some type of optional parameters instead of required parameters. You could then have added any number of parameters without having to specify them all in the route configuration. See this post for more information: https://stackoverflow.com/questions/44864303/sending-data-with-route-navigate-in-angular-2/44865817#44865817 — DeborahK, Feb 23 '18 at 17:03

score 0 · Answer 2 · answered Mar 16 '19 at 02:10

I found this way:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'app',
    children: [
      {
        path: '**',
        component: AppComponent
      }]},
  {path: 'home/', component: HomeComponent},
  {path: '**', component: HomeComponent}
];

Then what ever deep you have under /app the AppComponent will be used

Angular Router with children of same component

My problem

2 Answers2