0

我在其他路线上完美导航，但在这条路线上它包含其他路线，如儿童，当我点击"/source/:operatorid"路线内的编辑按钮时，我注意到两件事：

  1. "/sources"路由的组件再次渲染。
  2. 导航和锁定 chrome 中有一个无限循环，下一条路线将是"/sources/:operatorId/edit/:sourceId".

现在为什么会发生，我不知道，你能帮我吗？

按照我的代码...

路线：

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 {}

源组件：

@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 },
            // });
        });
    }
}
4

0 回答 0