角材料选项卡未打开插座的第一个选项卡答案

【问题标题】：Angular metrial tabs not opening the first tab for outlets角材料选项卡未打开插座的第一个选项卡
【发布时间】：2018-03-21 15:44:04
【问题描述】：

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

点击开始选项卡，然后选项卡打开，网址将是 --> 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>

【问题讨论】：

当您打开localhost:4200/will-kit 时，您的网址是什么样的？顺便说一句，如果这不是一些复制粘贴问题，那么 localhost:4200/will-kit/(taboutlet:./start) 因为 url 对于角度路由看起来真的很奇怪 :)
可能是您在重定向路由中缺少outlet: 'taboutlet'，或者您在路由中使用了不必要的./。

标签： angular angular-material angular5 angular-material2 angular-routing

【解决方案1】：

你可以使用AfterViewInit函数默认打开第一个标签

【讨论】：

【解决方案2】：

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

 public ngAfterViewInit() {

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

【讨论】：