Neu in Angular 4 - Router-ParamMap

06.05.2017 Stefan Welsch
Mobile Tech angular handson

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

class MyComponent {
 sessionId: Observable<string>;
 
 constructor(private route: ActivatedRoute) {}
 
 ngOnInit() {
   this.sessionId = this.route
     .queryParams
     .map(params => params['session_id'] || 'None');
 }
}

Der neue Ansatz

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 - pioneer, stuntman, mentor. As the founder of b-nova, Stefan is always looking for new and promising fields of development. He is a pragmatist through and through and therefore prefers to write articles that are as close as possible to real-world scenarios.