web-dev-qa-db-fra.com

Passer des paramètres invisibles ou cachés à l'aide de routerLink Angular

J'ai un lien de routeur comme ci-dessous:

<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show'}]">

Je veux passer le paramètre showTour. Mais, lorsque je fais cela, le paramètre est visible dans url et je voudrais le cacher. J'ai parcouru tellement de références (ce qui dit à propos de paramètres facultatifs), mais sans succès dans mon cas. Comment pourrais-je résoudre ceci?

angularrouterrouteparams
11
SaiUnique

Je ne sais pas s'il existe un moyen de le faire, car les données doivent être présentées dans la chaîne d'URL.

Ma suggestion utilise un service global qui stocke les données nécessaires. Par exemple:

//some dataService, which store your needed data.
@Injectable()
export class DataService {

   _showTour: string;

   set showTour(value: string) {
      this._showTour = value;
   }

   get showTour(): string {
       return this._showTour;
   }

   constructor() {}

}

et utilisez-le dans votre composant de navigation de cette manière: 

//your navigation component
@Component({
    selector: 'my-app',
    template: `
       <button class="take-a-tour-btn" (click)="onClick()">
    `
})
export class SomeComponent {
    constructor(private dataService: DataService, private router: Router) { }

    onClick() {
        this.dataService.showTour = 'show';
        this.router.navigate(['/dashboard']);
    }
}

Vous pourrez utiliser le même service dans votre composant de tableau de bord et obtenir la valeur requise, par exemple. de cette façon:

//your dashboard component
@Component({
    selector: 'my-dashboard',
    template: `
       <h1>{{ showTour }}</h1>
    `
})
export class DashboardComponent implements OnInit {

    showTour: string;

    constructor(private dataService: DataService) { }

    ngOnInit() {
        this.showTour = this.dataService.showTour;
    }
}
8
Jaroslaw K.
<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show', skipLocationChange: true}]">

Essayez d'utiliser la propriété skipLocationChange.

4
AddWeb Solution Pvt Ltd

dans Angular 7, vous pouvez utiliser Historique de l'état pour transmettre des données dynamiques au composant vers lequel vous souhaitez naviguer, sans les ajouter à l'URL, comme suit:

this.router.navigateByUrl('/user', { state: { orderId: 1234 } });

ou 

<a [routerLink]="/user" [state]="{ orderId: 1234 }">Go to user's detail</a>

et vous pouvez l'obtenir de cette façon 

const navigation = this.router.getCurrentNavigation();
this.orderId = navigation.extras.state ? navigation.extras.state.orderId : 0;
0
Fateh Mohamed

La réponse n'est pas tout à fait efficace car skipLocationChange ne modifie pas l'itinéraire actuel dans l'URL du navigateur et si vous souhaitez revenir plus tard, vous avez effectué un retour à partir du premier itinéraire.

Par exemple, si vous étiez sur la page d'accueil et utilisez ceci:

<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show', skipLocationChange: true}]">Go to dashboard</button>

si vous voulez revenir de dashboard à home, vous ne pouvez pas le faire avec objet location. Dans ce cas, vous devez utiliser Router et spécifier un itinéraire exact (/dashboard).

Mais dans de nombreux cas, il s’agit d’une mauvaise solution et le routage du navigateur ne change pas de /home à dashboard.

Inconvénients:

  • Le navigateur n'actualise pas à la bonne URL
  • Vous ne pouvez pas revenir de dashboard (itinéraire actuel)

Vous pouvez créer le service de données ou consulter la documentation officielle angular router docs

0
duprez