Angular 为什么使用多个路由器出口会导致错误？

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

看看数据参数。 在布局文件中，我通过以下方式在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>

这是你的电话号码。但这并不局限于旋转木马。这就是为什么我怀疑这更像是一个角度的问题，这也是为什么我在这里问这个问题

谢谢你的指导

---

David

路由器出口呈现当前子级。 例如

因此，根据您的URL是

事件详细信息/登录

还是

事件详细信息/主页

，

事件详细信息组件

s

路由器出口

将呈现所需组件。 如果你想有不同的模板，你必须创建不同的路线

我认为

*ngIf

不起作用，因为angular在检查DOM更改之前先检查路由。这是有意义的，因为它必须在呈现页面之前指向路由

在任何情况下，您都不应在同一组件中使用两个路由器插座，而应重新考虑您的方法<代码>数据不应用于

*ngIf

路由器出口

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

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;
        }
    });

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