Angular metrial 标签未打开第一个标签的出口

Question

我定义了如下所示的路线。当用户使用 URL --> http://localhost:4200/will-kit 加载应用程序时 我只获得 TABS，没有看到默认加载的第一个选项卡

单击“开始”选项卡然后打开该选项卡，url 将是 --> http://localhost:4200/will-kit/(taboutlet:./start)

const routes: Routes = [   { path: 'will-kit', component: WillKitLayoutComponent, children: [
    {
        path: '',
        redirectTo: './start',
        pathMatch: 'full'
    },
    {
        path: './start',
        component: StartComponent,
        outlet: 'taboutlet'
    },
    {
        path: './you',
        component: YouComponent,
        outlet: 'taboutlet'
    },
    {
        path: './status',
        component: StatusComponent,
        outlet: 'taboutlet'
    } ]} ];

HTML 中的制表符代码

 <nav mat-tab-nav-bar>
            <a mat-tab-link class="mat-test" *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="[{outlets: {taboutlet: routeLink.link}}]"
              routerLinkActive #rla="routerLinkActive" 
(click)="activeLinkIndex = i" [active]="rla.isActive" [routerLinkActiveOptions]="{exact: true}">
      <label class="mat-subheading-1">{{routeLink.label}} </label>
            </a>

          </nav>

Answer 1

您可以使用 AfterViewInit 函数默认打开第一个选项卡

Answer 2

按照建议处理 AfterViewInit 中的路由，默认加载第一个选项卡

 public ngAfterViewInit() {

        this.router.navigate([{ outlets: { 'taboutlet': './start' } }], {
            relativeTo: this.route
        });
    }