Javascript 角度：单击按钮时选择特定选项卡

在我的应用程序中，我有一个页面，上面有一些选项卡，如一般信息、联系人、发货地点、分销商分支机构、产品分配等。单击另一页上的按钮时，应选择我的“联系人”选项卡。然而，每次我点击我的按钮。它总是导航到我的第一个选项卡“常规信息”。当我单击我的按钮时，如何确保第二个选项卡中的一个被选中

下面是我的示例代码

页面1.html

<mat-card>
    <mat-card-header>
        <h3 class="page-title">{{DistributorTitle}}</h3>
        <mat-card-actions>
            <button  mat-stroked-button (click)="onBack()">Back</button>

        </mat-card-actions>
    </mat-card-header>
    <mat-card-content>
        <div>
            <mat-tab-group>
                <mat-tab label="General Info">
                    <ProfileDist-general-info></ProfileDist-general-info>
                </mat-tab>
                <mat-tab label="Contact">
                    <ProfileDist-contact></ProfileDist-contact>
                </mat-tab>
                <mat-tab label="Ship To">
                    <ProfileDist-ship-to></ProfileDist-ship-to>
                </mat-tab>

                <mat-tab label="Distributor Branch">
                    <ProfileDist-distributor-branch></ProfileDist-distributor-branch>    
                </mat-tab>

                <mat-tab label="Product Assignment">
                    <ProfileDist-product-assignment></ProfileDist-product-assignment> 
                </mat-tab>

                <mat-tab label="Customer Assignment">
                    <ProfileDist-customer-assignment></ProfileDist-customer-assignment> 
                </mat-tab>

                <mat-tab label="Options"> 
                    <ProfileDist-options></ProfileDist-options>
                </mat-tab>
            </mat-tab-group>
        </div>                   
    </mat-card-content>
</mat-card>

第2.ts页

  onClick(){
    this.router.navigateByUrl('distributors/General');
  }

---

selectedIndex

@Input（）

可以更改选项卡索引

第1.ts页

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";

@Component({
  selector: 'lib-profile-dist-ui',
  templateUrl: './profile-dist-ui.component.html',
  styleUrls: ['./profile-dist-ui.component.scss']
})
export class ProfileDistUiComponent implements OnInit {
    DistributorTitle: string;

    constructor(private router: Router) { 
    }

    ngOnInit() {
        this.DistributorTitle = "Distributor Details";
    }

    onBack(){
        this.router.navigateByUrl('/distributors');
    }


}

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  selector: 'lib-profile-dist-ui',
  templateUrl: './profile-dist-ui.component.html',
  styleUrls: ['./profile-dist-ui.component.scss']
})
export class ProfileDistUiComponent implements OnInit {
  DistributorTitle: string;
  activeTab: number = 0

  tabIndex = {
    "general": 0,
    "contact": 1,
    "ship_to": 2,
    "distributor_br": 3,
    "product_assg": 4,
    "customer_assg": 5,
    "options": 6
  }

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

  ngOnInit() {
    this.DistributorTitle = "Distributor Details";
    this.route.params.subscribe(params => {
      if (params['tab']) {
        this.activeTab = this.tabIndex[params['tab']]
      }
      else {
        this.activeTab = 0
      }

    })
  }

  onBack() {
    this.router.navigateByUrl('/distributors');
  }


}

并将html更改为

....
<mat-tab-group [selectedIndex]="activeTab">
     <mat-tab label="General Info">
....

---

不要忘了先导入弹拨

在您的案例中，选项卡参数为“联系人”或1“联系人”。您可以看到

tabIndex

是一个对象&

tabIndex[“contact”]

将返回

1

我编辑了一点答案，添加了几行参考，也解决了我的问题。谢谢。你真是帮了大忙

import 'rxjs/add/operator/pluck';

ngOnInit(){
  this.DistributorTitle = "Distributor Details";
  this.route.params.pluck('tab').subscribe(param => {
      if (param) {
        this.activeTab = this.tabIndex[param]
      }
      else {
        this.activeTab = 0
      }
  }
}