Перенаправить в указанную вкладку на другую страницу по ссылке Angular 6

Question

Я работаю с Angular 6.2 и Angular Material.

У меня есть страница с вкладками (3 вкладки).

Возможно перенаправить на этой странице, но с активной третьей вкладкой? Нажав на ссылку в навигационной панели.

Похоже, что это невозможно, на веб-сайтах для этого нет решения.

Answer 1

Вот решение, использующее сервис Location , который не использует угловой маршрутизатор и который прослушивает фрагмент хеша в маршруте и таким образом устанавливает для него selectedIndex , таким образом, содержимое вкладок загружается на одну и ту же страницу, но активная вкладка будет соответствовать фрагменту, заданному в маршруте.

Ссылки для перехода на страницу и активации вкладки: /my-page#0, /my-page#1 ...

Вот стек-блиц : https://stackblitz.com/edit/mat-tab-sync-with-hash-fragment

import { Component } from '@angular/core';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [Location, { provide: LocationStrategy, useClass: PathLocationStrategy }]
})
export class AppComponent  {
  name = 'Angular';
  selectedIndex = 0;

  constructor(private location: Location) {
    this.selectedIndex = (+this.location.path(true).substr(1) - 1) || 0;
    this.location.subscribe((value: PopStateEvent) => {
      if (value.url) {
        this.selectedIndex = (+value.url.substr(1) - 1) || 0;
      }
    });
  }
}

<mat-tab-group [selectedIndex]="selectedIndex">
...

Надеюсь, это поможет.

Answer 2

Я нашел хорошее решение:

Я использую queryParams

<a routerLink="/account" [queryParams]="{ tab: 'notifications'}">Link</a>

Затем я устанавливаю свою вкладку активной, если она есть, и ее значение = уведомления:

[active]="tab && tab === 'notifications'"

В контроллере я устанавливаю вкладку (this.tab), если есть параметры запроса, и удаляю ее, чтобы никогда не видеть

? = Вкладка уведомления

в моем URL.

ngOnInit() {
  this.activatedRoute.queryParams.subscribe((params) => {
    if (params.tab) {
      this.tab = params.tab;
      this.route.navigate([], {
        queryParams: {
          tab: null,
        },
        queryParamsHandling: 'merge',
      });
    }
  });
}

Answer 3

Если вы используете mat-tab-group, есть свойство input для указания индекса активной вкладки.

@ Input () selectedIndex: number |null => Индекс активной вкладки.

См. Официальные документы для групп вкладок мат