Angular: Resolver

In Angular ist ein Resolver ein Dienst, der für die Bereitstellung von Daten für eine Routenkomponente verantwortlich ist, bevor diese aktiviert wird. Resolver werden verwendet, um Daten vorab zu holen, was die Leistung einer Angular-Anwendung verbessern kann. Resolver können auch dafür sorgen, dass eine Route nur aktiviert wird, wenn bestimmte Bedingungen erfüllt sind. Mit einem Resolver kann zum Beispiel überprüft werden, ob ein Nutzer authentifiziert ist, bevor eine Route aktiviert wird, die eine Authentifizierung erfordert. Der Resolver gibt ein Observable oder ein Versprechen zurück, auf das der Router wartet, bevor er die Route aktiviert. So kann die Route auf die vom Resolver bereitgestellten Daten zugreifen, bevor sie dem Nutzer angezeigt werden.

Um einen Resolver in Angular zu verwenden, musst du zunächst einen Dienst erstellen, der die Daten für deine Route bereitstellt. Dieser Dienst sollte die Schnittstelle resolve implementieren. Dazu musst du eine resolve-Methode implementieren, die ein Observable oder ein Versprechen zurückgibt. Hier ist zum Beispiel ein einfacher Resolver, der eine Liste von Benutzern zurückgibt:

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

import { UserService } from './user.service';
import { User } from './user';

@Injectable()
export class UserListResolver implements Resolve<User[]> {
  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<User[]> {
    return this.userService.getUsers();
  }
}

Sobald du deinen Resolver erstellt hast, kannst du ihn in deiner Routenkonfiguration verwenden. Im folgenden Beispiel wird der UserListResolver verwendet, um der UserListComponent Daten zu liefern, bevor sie aktiviert wird:

const routes: Routes = [
  {
    path: 'users',
    component: UserListComponent,
    resolve: {
      users: UserListResolver
    }
  }
];

Um auf die vom Resolver bereitgestellten Daten zuzugreifen, kannst du den ActivatedRoute – Service in deiner Routenkomponente verwenden. Im folgenden Beispiel verwendet die UserListComponent den ActivatedRoute – Service, um die vom UserListResolver gelieferte Liste der Benutzer abzurufen:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { User } from './user';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  users: User[];

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.users = this.route.snapshot.data['users'];
  }
}

Dies ist nur ein einfaches Beispiel dafür, wie du Resolver in Angular verwenden kannst. Weitere Informationen findest du in der Angular-Dokumentation.