Question

我试图在显示单独出口的DialogBox内部的组件之间导航。所以我的主要问题在于两件事：

要使命名网点正常工作，必须将其路由添加到app.module.ts（可能是app.routing.ts）。
由于辅助路由取决于用户的更改，因此许多组件可以代替首次加载的组件。这就是为什么我要使用延迟加载来加载这些组件，而不是在app.module的开头加载它们。

所以我已经尝试过相对导航到当前路线，该路线局部可行，但是问题是找到了该路线，但是组件没有开始其生命周期。先前的组件为“关闭”，而应该替换的新组件永远不会运行，并且屏幕为空。

所以在我的app.module.ts中，我得到了：

{
path: 'adjust',
loadChildren: 'src/app/components/adjust-panel/module/features.module#FeaturesModule',
outlet: 'modalOutlet',
    },

要运行此导航，我只需使用：

    this.router.navigate([medicalObject.id], {
      relativeTo: this.route
    }).then(() => {
      this.router.navigate([{
        outlets: {
          modalOutlet: ['adjust']
        }
      }])
    })

这将通过如下所示的包装器运行对话框

export class ModalContainerComponent implements OnDestroy {
    destroy = new Subject<any>();
    currentDialog = null;

    constructor(
        private dialog: MatDialog,
        private route: ActivatedRoute,
        private router: Router,
    ) {
        this.openDialog();

    }

    openDialog(): void {
        this.route.params.pipe(takeUntil(this.destroy)).subscribe(params => {
            console.log(params)

            const dialogRef = this.dialog.open(FeaturesModalComponent, {
                width: '95vw',
                height: '95vh'
            });
            dialogRef.componentInstance.medicalObject = params.id
            dialogRef.afterOpened().subscribe(() => {
            })
            dialogRef.beforeClosed().subscribe(() => {
                dialogRef.componentInstance.close()
            })

            dialogRef.afterClosed().subscribe(result => {

                this.router.navigate(['../'], { relativeTo: this.route })
            });
        })
    }


    ngOnDestroy() {
        this.destroy.next();
    }

运行包装程序，并打开对话框。运行该模式的html文件本身本身就包含一个，因此当用户决定使用模式刷新页面时，它将重新加载并再次打开模式。

我的包装器中有一些html文件，您在其中获得了这个命名的插座。所以在模态下，我想在一开始就展示一些东西，当用户选择选项时，我想运行某些组件。所以我得到了一个我懒加载的模块：

const routes: Routes = [
    {
        path: '',
        component: AdjustPanelComponent,
        children: [
            {
                path: 'telesurgery',
                component: TelesurgeryComponent,
            }
        ],

    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class FeaturesRoutingModule { }

此路由是#FeaturesModule的一部分，已正确加载，因为显示了第一个组件（AdjustPanelComponent）。

因此，当您启动localhost：4200 /../../ medicalObject.id（modalOutlet：adjust）

时，您所拥有的URL如下所示：

当我使用时：

this.router.navigate(['telesurgery'], {
    relativeTo: this.route,
})

我获取和类似localhost：4200 /../../ medicalObject.id（modalOutlet：adjust / telesurgery）的URL

没有错误，但组件未运行。

所以我也尝试了这个：

this.router.navigate([{ outlets: { modalOutlet: ['telesurgery'] } }],
      { skipLocationChange: true, relativeTo: this.route });

这样我得到一个错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“调整”

还有：

   this.router.navigate([{
      outlets: {
        modalOutlet: 'telesurgery'
      }
    }]
      , {
        relativeTo: this.route
      }
    )

这将导致相同的错误。

任何原因吗？我在这里做什么错了？

在命名插座中导航

0 个答案: