Dans mon routable component
j'ai
@RouteConfig {
{path: '/login', name: 'Login', component: LoginComponent}
}
Mais comment puis-je obtenir les paramètres de requête si je vais à app_url/login?token=1234
?
Pour compléter les deux réponses précédentes, Angular2 prend en charge les paramètres de requête et les variables de chemin dans le routage. Dans la définition @RouteConfig
, si vous définissez des paramètres dans un chemin, Angular2 les traite en tant que variables de chemin et en tant que paramètres de requête.
Prenons un échantillon:
@RouteConfig([
{ path: '/:id', component: DetailsComponent, name: 'Details'}
])
Si vous appelez la méthode navigate
du routeur comme suit:
this.router.navigate( [
'Details', { id: 'companyId', param1: 'value1'
}]);
Vous aurez l'adresse suivante: /companyId?param1=value1
. La manière d'obtenir les paramètres est la même pour les paramètres de requête et les variables de chemin. La différence entre eux est que les variables de chemin peuvent être considérées comme des paramètres obligatoires et les paramètres de requête comme des paramètres facultatifs.
J'espère que ça vous aide, Thierry
UPDATE: Une fois les modifications apportées aux paramètres de requête http du routeur alpha.31 du routeur ne fonctionnent plus ( Matrix params # 2774 ). Au lieu de cela, le routeur angulaire utilise la notation dite Matrix URL.
Référence https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters :
Les paramètres de route facultatifs ne sont pas séparés par "?" et "&" comme ils serait dans la chaîne de requête d'URL. Ils sont séparés par des points-virgules ";" C’est la notation matricielle des URL - quelque chose que vous n’avez peut-être jamais vu auparavant.
Les RouteParams sont maintenant obsolètes. Voici comment procéder dans le nouveau routeur.
this.router.navigate(['/login'],{ queryParams: { token:'1234'}})
Et puis dans le composant de connexion, vous pouvez prendre le paramètre,
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.queryParams['token']
}
Ici est la documentation
Il semble que RouteParams
n'existe plus et est remplacé par ActivatedRoute
. ActivatedRoute
nous donne accès aux paramètres de notation de la matrice URL. Si nous voulons obtenir les paramètres de la chaîne de requête ?
, nous devons utiliser Router.RouterState
. Les paramètres de chaîne de requête traditionnels sont conservés dans le routage, ce qui peut ne pas être le résultat souhaité. La préservation du fragment est maintenant facultative dans le routeur 3.0.0-rc.1.
import { Router, ActivatedRoute } from '@angular/router';
@Component ({...})
export class paramaterDemo {
private queryParamaterValue: string;
private matrixParamaterValue: string;
private querySub: any;
private matrixSub: any;
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
this.router.routerState.snapshot.queryParams["queryParamaterName"];
this.querySub = this.router.routerState.queryParams.subscribe(queryParams =>
this.queryParamaterValue = queryParams["queryParameterName"];
);
this.route.snapshot.params["matrixParameterName"];
this.route.params.subscribe(matrixParams =>
this.matrixParamterValue = matrixParams["matrixParameterName"];
);
}
ngOnDestroy() {
if (this.querySub) {
this.querySub.unsubscribe();
}
if (this.matrixSub) {
this.matrixSub.unsubscribe();
}
}
}
Nous devrions être en mesure de manipuler la notation ?
lors de la navigation, ainsi que la notation ;
, mais je n'ai que la notation matricielle à fonctionner pour le moment. Le plnker qui est attaché à la dernière documentation de router indique que cela devrait ressembler à ceci.
let sessionId = 123456789;
let navigationExtras = {
queryParams: { 'session_id': sessionId },
fragment: 'anchor'
};
// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
Cela a fonctionné pour moi (depuis Angular 2.1.0):
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.snapshot.queryParams['token']
}
Angular2 v2.1.0 (stable):
ActivatedRoute fournit un observable que l'on peut souscrire.
constructor(
private route: ActivatedRoute
) { }
this.route.params.subscribe(params => {
let value = params[key];
});
Cela se déclenche à chaque fois que la route est mise à jour:
(Pour la route des enfants uniquement, telle que/hello-world)
Dans le cas où vous souhaiteriez effectuer ce type d’appel:
/ hello-world? foo = bar & fruit = banane
Angular2 n'utilise pas ? ni & mais ; au lieu. Donc, l'URL correcte devrait être:
/ hello-world; foo = bar; fruit = banane
Et pour obtenir ces données:
import { Router, ActivatedRoute, Params } from '@angular/router';
private foo: string;
private fruit: string;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.foo = params['foo'];
this.fruit = params['fruit'];
});
console.log(this.foo, this.fruit); // you should get your parameters here
}
Pour Angular 4
Url:
http://example.com/company/100
Chemin du routeur:
const routes: Routes = [
{ path: 'company/:companyId', component: CompanyDetailsComponent},
]
Composant:
@Component({
selector: 'company-details',
templateUrl: './company.details.component.html',
styleUrls: ['./company.component.css']
})
export class CompanyDetailsComponent{
companyId: string;
constructor(private router: Router, private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.companyId = params.companyId;
console.log('companyId :'+this.companyId);
});
}
}
Sortie de la console:
companyId: 100
J'ai inclus les versions JS (pour OG) et TS ci-dessous.
.html
<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>
Dans ce qui précède, j'utilise le tableau de paramètres de liens voir les sources ci-dessous pour plus d'informations.
routage.js
(function(app) {
app.routing = ng.router.RouterModule.forRoot([
{ path: '', component: indexComponent },
{ path: 'search', component: searchComponent }
]);
})(window.app || (window.app = {}));
searchComponent.js
(function(app) {
app.searchComponent =
ng.core.Component({
selector: 'search',
templateUrl: 'view/search.html'
})
.Class({
constructor: [ ng.router.Router, ng.router.ActivatedRoute, function(router, activatedRoute) {
// Pull out the params with activatedRoute...
console.log(' params', activatedRoute.snapshot.params);
// Object {tag: "fish"}
}]
}
});
})(window.app || (window.app = {}));
routage.ts (extrait)
const appRoutes: Routes = [
{ path: '', component: IndexComponent },
{ path: 'search', component: SearchComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
...
})
export class AppModule { }
searchComponent.ts
import 'rxjs/add/operator/switchMap';
import { OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
export class SearchComponent implements OnInit {
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params
.switchMap((params: Params) => doSomething(params['tag']))
}
Plus d'infos:
"Link Parameter Array" https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array
"Itinéraire activé - le guichet unique pour les informations sur l'itinéraire" https://angular.io/docs/ts/latest/guide/router.html#!#activated-route
Dans Angular 6, j'ai trouvé ce moyen plus simple:
navigate(["/yourpage", { "someParamName": "paramValue"}]);
Ensuite, dans le constructeur ou dans ngInit
, vous pouvez directement utiliser:
let value = this.route.snapshot.params.someParamName;
La manière simple de faire cela dans Angular 7+ est de:
Définir un chemin dans votre? -Routing.module.ts
{ path: '/yourpage', component: component-name }
Importez le module ActivateRoute and Router dans votre composant et insérez-les dans le constructeur
contructor(private route: ActivateRoute, private router: Router){ ... }
Abonnez-vous à ActivateRoute to ngOnInit
ngOnInit() {
this.route.queryParams.subscribe(params => {
console.log(params);
// {page: '2' }
})
}
Fournissez-le à un lien:
<a [routerLink]="['/yourpage']" [queryParams]="{ page: 2 }">2</a>
Selon la documentation Angular2 vous devez utiliser:
@RouteConfig([
{path: '/login/:token', name: 'Login', component: LoginComponent},
])
@Component({ template: 'login: {{token}}' })
class LoginComponent{
token: string;
constructor(params: RouteParams) {
this.token = params.get('token');
}
}
Route.snapshot fournit la valeur initiale du paramètre route carte. Vous pouvez accéder aux paramètres directement sans vous abonner ou ajout d'opérateurs observables. C'est beaucoup plus simple d'écrire et de lire:
Citation de Angular Docs
Pour vous aider, voici comment procéder avec le nouveau routeur:
this.router.navigate(['/login'], { queryParams: { token:'1234'} });
Et puis dans le composant de connexion (notez le nouveau .snapshot
ajouté):
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.sessionId = this.route.snapshot.queryParams['token']
}