Neu in Angular 4 - Router-ParamMap

06.05.2017Stefan Welsch
Mobile Angular Hands-on

Um die Route- und Query-Parameter einer zugehörigen Route nutzen können, gibt es nun die Möglichkeit paramMap zu verwenden.

Der traditionelle Ansatz

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
class MyComponent {
 sessionId: Observable<string>;
 
 constructor(private route: ActivatedRoute) {}
 
 ngOnInit() {
   this.sessionId = this.route
     .queryParams
     .map(params => params['session_id'] || 'None');
 }
}

Der neue Ansatz

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
class MyComponent {
 sessionId: Observable<string>;
 
 constructor(private route: ActivatedRoute) {}
 
 ngOnInit() {
   this.sessionId = this.route
     .queryParamMap
     .map(paramMap => paramMap.get('session_id') || 'None');
 }
}

Gibt es dadurch Vorteile?

Ja, da durch die Verwendung von paramMap sicher gesetellt ist, dass es Type-Safe ist. Denn bei der vorherigen Version gab es einen unsicheren Type (type params = {[key: string]: any}), welcher dazu führte, dass die Werte alle möglichen Typen haben konnten. Der neue Ansatz liefert stattdessen entweder einen String oder ein Array aus Strings. Je nachdem welche Methode genutzt wird (paramMap.get(): string oder paramMap.getAll(): string[]))

Stefan Welsch

Stefan Welsch – Manitu, Pionier, Stuntman, Mentor. Als Gründer von b-nova ist Stefan immer auf der Suche nach neuen und vielversprechenden Entwicklungsfeldern. Er ist durch und durch Pragmatiker und schreibt daher auch am liebsten Beiträge die sich möglichst nahe an 'real-world' Szenarien anlehnen.