4
votes

Rediriger dans un onglet spécifié dans une autre page à partir du lien Angular 6

Je travaille avec Angular 6.2 et Angular Material.

J'ai une page avec des onglets de tapis (3 onglets).

Il est possible de rediriger dans cette page mais avec le 3ème onglet actif? En cliquant sur un lien dans la barre de navigation.

Cela ne semble pas possible, il n'y a pas de solution pour cela sur les sites Web.

angular angular-material

3 commentaires

Je ne sais pas si je vous ai bien compris, vous souhaitez passer à une autre page lorsque quelqu'un clique sur un onglet?

Vous pouvez toujours transmettre des informations dans votre URL à l'aide de queryParams et vous abonner à queryParams dans votre composant. Sur cette base, vous pouvez ouvrir n'importe quel état spécifique.

J'ai oublié de dire que je ne peux pas changer l'URL (pas de paramètres)

3 Réponses :

2
votes

Si vous utilisez un mat-tab-group, il existe une propriété d'entrée pour spécifier l'index de l'onglet actif.

@Input () selectedIndex: nombre | null => L'index de l'onglet actif.

Reportez-vous à la Documents officiels pour les groupes d'onglets de tapis

8 commentaires

le selectedIndex est le premier onglet. Mais je veux le changer si je viens sur la page à partir d'un autre lien, la documentation n'explique pas comment faire cela

Vous pouvez avoir une méthode dans votre composant pour définir l'index sélectionné lors de la redirection, non? Ou vous pouvez le définir sur ngOnInit ()

Comment puis-je savoir dans mon composant si je viens du lien? C'est une solution étrange tho

Vous ne souhaitez donc activer le 3ème onglet que lorsque vous venez de ce lien? et sinon vous voulez activer le 1er onglet? Est-ce correct?

Oui exactement. Et sans paramètres de requête.

En supposant que lorsque vous cliquez sur ce lien, vous chargez essentiellement ce composant (avec trois onglets) via un lien de routeur, vous pouvez donc inclure un paramètre d'entrée dans votre composant pour vérifier si vous avez redirigé à partir du lien ou non. Lors du routage, vous pouvez définir une valeur et vérifier la méthode ngOnChanges pour vous assurer que le lien est redirigé vers le composant. Après cela, vous pouvez définir l'index de l'onglet.

Découvrez comment transmettre des données via le routage via cette réponse: stackoverflow.com/a/34364618/3763524

Vérifiez cette application stackblitz, cette URL ouvrira le 3ème onglet de la page, l'analyse de l'URL pourrait également être différente: mat-tab-sync-with-hash-fragment.stackblitz.io/#3

0
votes

Voici une solution utilisant le service Location qui n'utilise pas le routeur angulaire et qui écoute le fragment de hachage dans la route et lui définit le selectedIndex , qui façon, le contenu des onglets sont tous chargés dans la même page mais le activeTab correspondra au fragment défini dans l'itinéraire.

Les liens pour aller à la page et activer un onglet seraient / ma-page # 0 , /my-page#1...

Voici un stackblitz : https://stackblitz.com/edit/mat-tab-sync-with-hash-fragment

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

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

J'espère que cela vous aidera.

2 commentaires

Ne fonctionne pas, je ne peux pas changer le lien de la page. J'ai une page avec 3 onglets, pas 3 pages.

J'ai édité la solution pour utiliser le selectedIndex et l'analyser à partir du fragment de hachage dans l'itinéraire, afin que vous puissiez acheminer vers votre page et activer l'onglet indiqué dans l'itinéraire.

1
votes

J'ai trouvé une bonne solution:

J'utilise queryParams

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

Ensuite, je mets mon onglet actif s'il y a tab & c'est value = notifications:

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

Dans le contrôleur, je règle l'onglet (this.tab) s'il y a des queryparams et je le supprime donc je ne vois jamais

? tab = notifications

dans mon URL.

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

2 commentaires

Où ajouter ceci [active] = "tab && tab === 'notifications'"

@viveka sur le composant mat-tab.