Component rendering infinitely with navigate

127 Views Asked by At

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:

  1. The component of the "/sources" route renders again.
  2. 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 },
            // });
        });
    }
}
0

There are 0 best solutions below