单击链接应转到Angular中的特定选项卡

Question

当我单击下面的链接时，它应重定向到另一页并打开一个特定的选项卡。

HTML-应该转到我的个人资料页面的密码标签

<a routerLink="/myprofile" href="javascript:;" class="kt-notification__item">
    <div class="kt-notification__item-icon">
        <span class="iconify" data-icon="simple-line-icons:key" data-inline="false"></span>
    </div>
    <div class="kt-notification__item-details">
        <div class="kt-notification__item-title kt-font-bold">
            Password
        </div>
        <div class="kt-notification__item-time">
            Change your password
        </div>
    </div>
</a>    

Answer 1

您可以通过在路径中添加查询参数来解决它：

@ViewChild(MatTabGroup, {static: true}) tabGroup: MatTabGroup;

constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

ngOnInit() {
  this.route.queryParams.subscribe((data) => {
    if(data.index && (data.index === '0' || data.index=== '1')) {
      this.tabGroup.selectedIndex = data.index;
    } else {
      this.router.navigate(
        [], 
        {
          relativeTo: this.route,
          queryParams: { index: '0' },
          queryParamsHandling: 'merge'
      });
    }
  });
}

tabChanged(event: MatTabChangeEvent) {
    this.router.navigate(
      [], 
      {
        relativeTo: this.route,
        queryParams: { index: event.index },
        queryParamsHandling: 'merge'
    });
}

在HTML文件中，实现用于更新查询参数的tabChanged方法：

<mat-tab-group (selectedTabChange)="tabChanged($event)">
  <mat-tab label="Tab 1">
    // some content
  </mat-tab>
  <mat-tab label="Tab 2">
    // some content
  </mat-tab>
</mat-tab-group>

现在您可以通过以下路由器链接导航至此选项卡：

<a [routerLink]="['/myprofile']" [queryParams]="{index: '1'}">Somewhere</a>