为什么使用多个路由器插座会导致错误？

Question

我构建了一个应用程序，其中主页与其他页面的结构 html 不同。我还使用 mdbangular 作为 UI 框架。为了将模板从主页切换到其他页面，我做了这个路由行为（我总结了）：

{ path: 'home', component: HomeComponent, data: { homePage: true } },
{ path: 'event-details', component: EventDetailsComponent },
{ path: 'login', component: LoginComponent, data: { fullPage: true } },

看看数据参数。在布局文件中，我这样在 html 之间切换：

<ng-container *ngIf="homePage === true">
    <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>     
</ng-container>

    <ng-container *ngIf="homePage === false && fullPage == false">
        <!-- JUST A SAMPLE IMAGINE EXTRA HTML-->
        <router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
    </ng-container>

当我在主页和任何其他页面之间导航时，我会收到一个错误，如果我只使用一个路由器插座而不是两个，则可以避免该错误。

我的问题是：当我使用两个而不是一个路由器插座时，为什么会出现错误？当我以这种方式在路由器插座之间切换时，是否有规则或 Angular6+ 我应该做的事情？比如在下一个路由器插座之前销毁或分离前一个路由器插座？

这是我获取数据参数的方法：

ngOnInit() {
    this.activatedRoute.url.subscribe(() => {
        const routeParams = this.activatedRoute.snapshot.firstChild.data;

        if (routeParams.homePage === undefined || routeParams.homePage === null) {
          this.homePage = false;
        } else {
          this.homePage = routeParams.homePage;
        }

        if (routeParams.fullPage === undefined || routeParams.fullPage === null) {
          this.fullPage = false;
        } else {
          this.fullPage = routeParams.fullPage;
        }
    });

这里是error explain with the mdbcarousel。但这不仅限于轮播。这就是为什么我怀疑这更像是 Angular 的事情，这也是我在这里问这个问题的原因。

感谢您的指导，

大卫

Answer 1

router-outlet 呈现当前子项。例如

{ 
   path: 'event-details', 
   component: EventDetailsComponent,
   children: [
       { path: 'home', component: HomeComponent }
       { path: 'login', component: LoginComponent }
   ],
},

因此，根据您的 URL 是 event-details/login 还是 event-details/home，EventDetailsComponent 和 router-outlet 将呈现请求的组件。如果您想拥有不同的模板，则必须创建不同的路线。

我认为 *ngIf 不起作用，因为 angular 在检查 DOM 更改之前先检查路由。有道理，因为它必须在呈现页面之前指向路由。

在任何情况下，您都应该 100% 不要在同一个组件中使用两个路由器插座 ，而是重新考虑您的方法。 data 不应该用来 *ngIf 的 router-outlet!

为什么使用多个路由器插座会导致错误？

Why use of many router outlet cause error?

angular

angular-ui-router