Угловой: выберите конкретную вкладку при нажатии кнопки

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

Вам необходимо добавитьtab params в route.ts

, если 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первый