I'm navigating perfectly on other routes, but on this route it contains other routes like children, and when I click on the edit button inside the "/source/:operatorid" route, I noticed two things:
- The component of the
"/sources"route renders again. - There is an infinite loop in the navigate and lock chrome, which the
next route would be
"/sources/:operatorId/edit/:sourceId".
Now why is it happening I don't know, could you help me?
Follow my code ...
ROUTES:
const routes: Routes = [
{
path: 'login',
component: LoginComponent,
},
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [AuthGuardService],
},
{
path: 'sources',
component: SourceComponent,
canActivate: [AuthGuardService],
runGuardsAndResolvers: 'always',
children: [
{
path: ':operatorId',
component: SourceComponent,
canActivate: [AuthGuardService],
runGuardsAndResolvers: 'always',
children: [
{
path: 'edit/:sourceId',
component: SourceEditComponent,
canActivate: [AuthGuardService],
runGuardsAndResolvers: 'always',
},
{
path: 'links/:linkId',
component: SourceComponent,
canActivate: [AuthGuardService],
runGuardsAndResolvers: 'always',
},
],
},
],
},
{
path: 'novo-source',
component: SourceEditComponent,
canActivate: [AuthGuardService],
},
{
path: '',
pathMatch: 'full',
redirectTo: '/dashboard',
canActivate: [AuthGuardService],
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
SOURCE COMPONENT:
@Component({
selector: 'wza-source-page',
templateUrl: './sources.component.html',
styleUrls: ['./sources.component.scss'],
})
export class SourceComponent implements OnInit {
constructor(
private router: Router,
private route: ActivatedRoute,
protected readonly routerStore: RouterStoreService,
protected readonly sourceStore: SourceStoreService,
private sourceService: SourceService,
private toastService: ToastService
) {
this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
console.log('Oi');
this.routerStore.isSourceRoute$.subscribe(isSourceRoute => {
if (isSourceRoute) {
this.sourceStore.dispatchGetData();
}
});
});
}
ngOnInit(): void {}
edit(object: ISourceApiDataObject): void {
combineLatest([
this.routerStore.isSourceRoute$,
this.routerStore.isSourceLinksRoute$,
this.routerStore.routerShortUrlSource$,
this.routerStore.routerShortUrlLink$,
this.routerStore.paramOperatorAndLinkId$,
]).subscribe(([isSourceRoute, isSourceLinksRouter, shortUrlSource, shortUrlLink, paramObject]) => {
const routeName = isSourceRoute && !isSourceLinksRouter ? `${shortUrlSource}/` : `${shortUrlLink}/`;
if (isSourceRoute && !isSourceLinksRouter) {
delete paramObject.linkId;
}
this.router.navigate(['/sources/21/edit/1']);
// this.router.navigate(['sources/', paramObject.operatorId, 'edit', object.key], {
// queryParams: { name: object.name },
// });
});
}
}