Question

我要实现的目标

我想在模态对话框中打开Angular应用中可用的任何路径。

我尝试过的事情

我创建了一个名为content的托管组件，它看起来像这样：

<router-outlet></router-outlet>

<div id="stack" class="invisible" [ngClass]="{ 'stacked': isStacked }">
    <button (click)="closeChild()">Close</button>
    <router-outlet name="stack"></router-outlet>
</div>

默认情况下，stack div是不可见的。所有页面都实现了一项服务，该服务应该能够打开router-outlet中的链接。

然后，我尝试使用以下代码打开链接：

        this.isStacked = true;
        const routeParams = this.parseRoute(route);

        this.router.navigate([
                {
                    outlets: { stack: [ 'content', 'page1' ] },
                },
            ],
            {
                skipLocationChange: true,
            },
        );

content组件位于所有路由content/:sub-page中。这样做的想法是，允许堆叠这样的模式对话框并在主要路由器出口内打开主路径，并根据需要在名为stack的出口处打开一个新的模式对话框。

为此，我实现了ngOnInit：

    ngOnInit(): void {
        this.route.params.subscribe(params => {
            const route = (params['sub-page'] || '');
            const pathParts = this.parseRoute(route);
            this.router.navigate(pathParts, { skipLocationChange: true });
        });
    }

该解决方案的问题在于，现在后台的主要插座会加载应放在stack插座中的内容。

我要达到的目标是否有解决方案？

允许在多个插座中布线

0 个答案: