javascript - Angular:单击按钮时选择特定选项卡

在我的应用程序中，我有一个页面，其中包含几个选项卡，如“一般信息”、“联系方式”、“发货至”、“分销商分公司”、“产品分配”等。当单击另一个页面上的按钮时，应选择我的“联系人”选项卡。但是，每次当我点击我的按钮时。它总是导航到我的第一个标签“一般信息”。当我单击我的按钮时，如何确保选择了我的第二个选项卡。

以下是我的示例代码。

页面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>

page1.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');
    }


}

page2.ts

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

最佳答案

selectedIndex @Input() 可以让标签索引改变

page1.ts

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">
....

您需要在 route.ts 中添加 tab 参数

如果 selectedIndex 不更改来自同一页面的路由，则在 pluck 中使用 rxjs

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
      }
  }
}

并且不要忘记先导入 pluck

关于javascript - Angular:单击按钮时选择特定选项卡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53940283/