Question

在我的应用程序中，我有一个页面，其中包含一些标签，例如“常规信息”，“联系方式”，“发往”，“分销商分支”，“产品分配”等等。单击另一页上的按钮时，应选择我的“联系人”选项卡。但是，每次单击按钮时。它总是导航到我的第一个标签“常规信息”。单击按钮时，如何确保选择第二个选项卡。

以下是我的示例代码。

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

Answer 1

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

别忘了先导入拔毛

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

1 个答案: