different routing for every components using ngSwitchCase-CodePudding

Is possible to have different routing for every components? I have this situation: one main component with one panel for select some voice. inside the main component I have one container switch, when the user select the panel the nested component are showed, but the routerLink remain always the same. I would like to have for example :

mainrouterlink_with_the_id_of_item/labeling

mainrouterlink_with_the_id_of_item/activity

mainrouterlink_with_the_id_of_item/settings

if is possible how can do that?

<div class="mt-0">

                        <ng-container [ngSwitch]="selectedPanel">
                            <!-- Labeling -->
                            <ng-container *ngSwitchCase="'labeling'">
                                <dashboards-recipe-label></dashboards-recipe-label>
                            </ng-container>
                            <!-- Activity -->
                            <ng-container *ngSwitchCase="'activity'">
                                <dashboards-recipe-activity></dashboards-recipe-activity>
                            </ng-container>           
                            <!-- settings -->
                            <ng-container *ngSwitchCase="'settings'">
                                <dashboards-recipe-settings></dashboards-recipe-settings>
                            </ng-container>
                        </ng-container>
                    </div>

CodePudding user response：

Yes this can be done.

in Routing module

const appRoutes: Routes = [
  {
    path: 'settings', component: DashboardsRecipeSetting

  },
  { path: 'activity', component: DashboardsRecipeActivity},
  { path: 'labelling', component: DashboardsRecipeLabelling}
];

and in your component, instead of having the entire ng-container, just replace with below

<router-outlet></router-outlet>

And from where you are selecting this, just use a routerlink

 <a
      routerLinkActive="active-link"
      routerLink="/settings"
     
    >Settings</a>
 <a
      routerLinkActive="active-link"
      routerLink="/labelling"
     
    >Labelling</a>
 <a
      routerLinkActive="active-link"
      routerLink="/activities"
     
    >Activities</a>

CodePudding user response：

It is indeed possible. To give a more precise answer we would need more context. If you could provide a more detailed information about why you want to do that and the code that goes with this flow we could help you with better answers.

With the information we have you would need to map those routes to the same component in your routing module and navigate to the route when necessary.

But if your component has only this, maybe it would be better to have three separate components and navigate using the route.

...
   {
       path: 'labeling',
       component: YourComponent,
   },
   {
       path: 'activity',
       component: YourComponent,
   },
   {
       path: 'settings',
       component: YourComponent,
   },
...

If it is only your route that defines what should be displayed, you should change the whole ngSwitch block for the tag.

<div class="mt-0">
    <router-outlet></router-outlet>
</div>

And use navigation to change the route instead of using a variable.

goToSettings() {
  this.router.navigate(['mainrouterlink_with_the_id_of_item/settings']);
}