路由器插座在错误的位置意外激活

Question

我有一个要在mat-tab-group控件内激活的子控件（我不想使用mat-nav，因为我想要mat-tab-group提供的动画-只是使选项卡控件更容易处理组件创建。

但是我的孩子路线正在多个地方激活。

<mat-tab-group>

    <mat-tab label="Animals">

        <ng-component *ngIf="showCats">
            Cats
        </ng-component>

        <ng-component *ngIf="!showCats">
            Dogs
        </ng-component>

    </mat-tab>

    <mat-tab label="FAQ">
        <router-outlet></router-outlet>
    </mat-tab>

</mat-tab-group>

Answer 1

如果您放置ng-component而不是ng-container

，则会发生这种情况

很容易犯错-路由器会将ng-component视为某种特殊类型的孩子，并在其中自动创建一个router-outlet。

解决方案很简单-使用ng-container

 <ng-container *ngIf="showCats">CATS</ng-container>