代码之家 › 专栏 › 技术社区 › David Létourneau

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

angular-ui-router angular

0

David Létourneau · 技术社区 · 7 年前

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

看看数据参数。

<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 . 但这并不局限于旋转木马。这就是为什么我怀疑这是一个角度更大的东西,这也是为什么我问这个问题在这里。

谢谢你的指导,

大卫

1 回复 | 直到 7 年前

1

mchl18 7 年前

router-outlet 渲染当前子级。

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

event-details/login 或 event-details/home EventDetailsComponent s 路由器出口 如果你想有不同的模板,你必须创建不同的路线。

我相信 *ngIf 不工作,因为angular在检查DOM更改之前先检查路由。这是有意义的,因为它必须在呈现页面之前指向一个路由。

无论如何你应该 100%不使用两个路由器插座 data *ngIf公司 这个 路由器出口