I'm trying to add child routes to a sidebar menu using Angular 12. When I click on a child route link it briefly goes to the child component then automatically redirects back to the parent component. I can't figure out why.
I declare all of my routes in the parent component's routing module:
const routes: Routes = [
{
path: '',
component: AppManagementComponent,
resolve: {
data: SupportingDataResolverService
},
children: [
{
path: 'users',
loadChildren: () => import('./user-management/user-management.module').then((m) => m.UserManagementModule),
data: {
breadcrumb: 'Account Settings'
}
},
{
path: 'roles',
loadChildren: () => import('./app-roles/app-roles.module').then((m) => m.ApplicationsRolesModule),
data: {
breadcrumb: 'Application Roles'
}
},
{
path: 'data',
loadChildren: () => import('./data-management/data-management.module').then((m) => m.DataManagementModule),
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'orgcodes',
},
{
path: 'orgcodes',
loadChildren: () =>
import('./data-management/organisation-codes/organisation-codes.module').then((m) => m.OrganisationCodesModule),
data: {
breadcrumb: 'Organisation Codes'
}
},
{
path: 'appdata',
pathMatch: 'full',
loadChildren: () =>
import('./data-management/app-data/app-data.module').then((m) => m.AppDataModule),
data: {
breadcrumb: 'App Data'
}
},
{
path: 'usercodes',
pathMatch: 'full',
loadChildren: () =>
import('./data-management/user-codes/user-codes.module').then((m) => m.UserCodesModule),
data: {
breadcrumb: 'User Codes'
}
}
]
},
I link to the child routes in the parent component sidebar menu:
<mat-sidenav-container>
<mat-sidenav
mode="side"
opened
position="start" >
<mat-list>
<mat-list-item
class="sidebar-item"
routerLink="users"
routerLinkActive="selected"
>Users
</mat-list-item>
<mat-list-item
class="sidebar-item"
routerLink="roles"
routerLinkActive="selected"
>
Roles
</mat-list-item>
<mat-accordion>
<mat-expansion-panel
routerLink="data"
routerLinkActive="selected"
>
<mat-expansion-panel-header>
<mat-panel-title>
Data Management
</mat-panel-title>
</mat-expansion-panel-header>
<mat-list>
<mat-list-item
class="sidebar-item"
routerLink="data/orgcodes"
><mat-icon>arrow_right</mat-icon> Organisation Codes
</mat-list-item>
<mat-list-item
class="sidebar-item"
routerLink="data/appdata"
><mat-icon>arrow_right</mat-icon> App Data
</mat-list-item>
<mat-list-item
class="sidebar-item"
routerLink="data/usercodes"
><mat-icon>arrow_right</mat-icon> User Codes
</mat-list-item>
</mat-list>
</mat-expansion-panel>
</mat-accordion>
</mat-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
The router links to 'users' and 'roles' work fine. When I click on the 'data' router link it redirects to 'data/orgcodes' as it should, but when I click on one of the other child route links like 'data/appdata' or 'data/usercodes' it briefly goes to that particular child component then redirects back to 'data/orgcodes'. If I remove the 'orgcodes' redirect, it will redirect back to 'data' instead.
I've tried changing the child routerLink syntax to "./data/usercodes" and the same thing happens. I tried changing it to "/data/usercodes" and got Error: Cannot match any routes. URL Segment: 'data/usercodes'. I also added patchMatch: 'full' to the child routes in the routing module and got the same result.
If I manually type in the child route into the browser it works like this: www.myapp.com/appmanagement/data/usercodes. Any help would be appreciated.
UPDATE:
I added some code to listen to when the route changes. I noticed a 'NavigationCancel - navigation id is not equal to the current navigation id' appears when the page redirects back to the parent component.
Related
I have side nav with nested routes.my in click on the first button inside navbar it goto the doctors/doctors-list and router link active work perfectly. but I have other children routers like doctors/creat, doctors/update:id when I am going to those routes my router link is not activated as expected. my app structure is when the user first clicks on the doctor button it doctors/doctors-list
when user select doctor from the list route will be changed to the 'doctors/update:id'.how to slove this issue
<a routerLink="doctors/doctors-list" routerLinkActive="active"></a>
my routes config
{
path: 'doctors',
component: DoctorsHomeComponent,
children: [
{
path: 'doctors-list',
component: DoctorsComponent,
},
{
path: 'doctors/creat',
component: DoctorsPageComponent,
},
{
path: 'update-doctor/:id',
component: DoctorsPageComponent,
}
]
}
Have you try this
#Component
import { Router } from '#angular/router';``
constructor(public router: Router) {}
isdoctorsActive(exact) {
return this.router.isActive('doctors/', exact);
}
#html
<a routerLink="doctors/doctors-list" [ngClass]="{'active': isdoctorsActive(false)}"></a>
Have you added the following tag in your doctor components html page
<router-outlet></router-outlet>
You need to use lazy routing here -
In your app-routing.module.ts you can load doctor module like below code
const routes: Routes = [
{
path: '',
component: LandingComponent,
},
{
path: 'doctors',
loadChildren: 'doctor.module#DoctorModule'
}
];
Once it loads doctor module then it loads the component which it founds in the URL
Below code will be in your doctor-routing.module.ts
const routes: Routes = [
{ path: 'doctors-list', component: DoctorsComponent},
{ path: 'create', component: DoctorsPageComponent},
{ path: 'create/:id', component: DoctorsPageComponent}
];
Above routes you can use like this -
It loads doctors component
<a routerLink="doctors/doctors-list" routerLinkActive="active"></a>
It loads doctors page component in create mode
<a routerLink="doctors/create" routerLinkActive="active"></a>
It loads doctors page component in edit mode
<a routerLink="['doctors/create', id]" routerLinkActive="active"></a>
I am trying to use scrollIntoView when my page is loaded and when a user clicks on one of the menu buttons.
Therefore, I am subscribing to the route params in ngOnInit (Also tried in ngAfterViewInit) and inside there I activate "scrollIntoView()".
The issue is that it is not working on the First loading of the page (if the client enter direcly to www.website.co.il/home/componentName instead of www.website.co.il/home) but only if I change my route after the page is loaded.
app-routing.module.ts
{ path: '', component: HomeComponent },
{ path: 'home/:section', component: HomeComponent },
{ path: 'home', component: HomeComponent }
navbar.component.html
<li
class="menuItem"
*ngFor="let menuItem of (menuItems$ | async).menuItems; trackBy: trackByFunction">
<a
class="menuItem__link"
[routerLink]="['home', menuItem.link]">{{ menuItem.name }}</a>
</li>
our-services.component.ts
this.route.params.subscribe(params => {
if(params.section === COMP_LINK_NAME) {
this.container.nativeElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
}
});
}
COMP_LINK_NAME is const parameter of our-services component
I am wanting to use Material Tab's (https://material.angular.io/components/tabs/api#MatTabLink) within my Ionic 4 project, now, the requirements are that I need to house multiple views in a tab and the first thought was that I can use a new ion-router-outlet or router-outlet within my parent component.
Bare in mind that I do already have one router outlet for the main app.
I am lazy loading the main chat routes in my app-routing.module.ts, this page is responsible for loading the tabs.
{ path: 'chat', loadChildren: './chat/chat.module#ChatPageModule', canActivate: [ AuthGuard ]}
Now, in my chat.module.ts I have the following routes:
{ path: '', component: ChatPage },
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
ChatPage component is my parent tab view page. The others I am wanting to be in a tab.
The HTML for displaying these tabs is in chat.page.html and looks like this:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of routeLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{ link.label }}
</a>
</nav>
<router-outlet></router-outlet>
I have also tried <ion-router-outlet></ion-router-outlet> but this throws up more issues.
The main issue here is that the routes look as though they are loading up in the main router outlet rather than the child one, I have tried adding the name attribute to the mark up but my IDE states that it's not valid and doesn't seem to work.
Ok, I have figured it out, and I am going to look stupid for not trying this before but the issue was that in order to use this child router-outlet the routes I wanted in tabs need to child routes.
{ path: '', component: ChatPage, children: [
{ path: 'active', component: ActivePage },
{ path: 'messages', component: MessagesPage },
{ path: 'teams', component: TeamsPage }
] },
I have a route defined like this:
My app.component.html has 2 outlets:
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
My route:
const routes: Routes = [
{ path: 'contents/:id', component: ContentComponent, children: [
{ path: 'edit', component: ContentFormComponent, outlet: 'modal' }
]},
];
The route (example) /contents/324231 loads fine with the ContentComponent.
What I need to do is that the route /contents/324231/edit loads the ContentFormComponent inside the 'modal' outlet.
I tried to follow the examples, building a link:
<a [routerLink]="[ {outlets: { modal: 'edit' } } ]" >edit</a>
It gives the href: /contents/1/(modal:edit)
When I click in the link, the url changes to this but the component is not loaded (neither the constructor or ngOnInit method are called).
Any thoughts?
I have the following 2 routes in my app.module.ts:
const appRoutes: Routes = [
{path: 'property/:id', component: PropertyDetailComponent},
{
path: 'properties',
component: ListingViewComponent,
data: { title: 'Properties List' }
},
{ path: '',
redirectTo: '/properties',
pathMatch: 'full'
}
];
In my app.component.html I have the following component and outlet:
<side-nav></side-nav>
<contact-agent></contact-agent>
<router-outlet></router-outlet>
I want to show the side-nav for ListingView and contact-agent for PropertyDetail.
How can I conditionally show these? Do I use the data/title property in routes?
Something like:
<div *ngIf="title === 'Properties List'">
<contact-agent></contact-agent>
</div>
You may want to consider defining a secondary (also called auxiliary) route for the side-nav and contact-agent. Then you can route to the appropriate content in that secondary outlet.
You can find out more about secondary routes here: https://angular.io/docs/ts/latest/guide/router.html#!#secondary-routes
But basically, the html would look like this:
<router-outlet name=secondaryInfo></router-outlet>
<router-outlet></router-outlet>