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的{{1}}会显示要求的组件。如果要使用不同的模板，则必须创建不同的路线。

我认为router-outlet无法正常工作，因为角度检查会在检查DOM更改之前进行路由。这是有道理的，因为它必须在呈现页面之前定向到路线。

无论如何，您应该 100％不要在同一组件中使用两个路由器插座，而应重新考虑您的方法。 *ngIf不应用于data的{{1}}！

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

1 个答案: