Uso De Resolve En Rutas Angular2

Basado en @angular/router v3-beta, estos son los pasos requeridos.

Implementa un solucionador que devuelve un valor Observable o un valor plano:

@Injectable()
export class HeroResolver implements Resolve {

    constructor(
        private service: HeroService
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero> {
        const id = +route.params['id'];
        return Observable.fromPromise(this.service.getHero(id));
    }

}

Tenga en cuenta que en caso de que devuelva un observable, el valor sin envolver (el primero) estará disponible a través de route.snapshot.data. Si desea que el observable en sí esté disponible, entonces necesita envolverlo en otro Observable:

return Observable.of(source$);

Añade el solucionador a tu ruta:

export const HeroesRoutes: RouterConfig = [
    { path: 'heroes',  component: HeroListComponent, resolve: { heroes: HeroesResolver } },
    { path: 'hero/:id', component: HeroDetailComponent, resolve: { hero: HeroResolver } }
];

Finalmente, proporcione su clase resolve y cualquier dependencia para arrancar o su componente principal providers:

bootstrap(AppComponent, [
    HeroesResolver, HeroService
])

Consumir los datos resueltos de una instancia de ActivatedRoute:

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

Recuerde que snapshot significa el valor en el estado de ejecución, tanto en la clase component como en la clase resolver. Los datos no se pueden actualizar desde las actualizaciones de params con este enfoque.

Émbolo: http://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P?p=preview Material de origen: https://github.com/angular/angular/commit/f2f1ec0#diff-a19f4d51bb98289ab777640d9e8e5006R436

Como ya ha mencionado alexpods, no parece haber una 'resolución' como tal. La idea parece ser que haga uso de los ganchos de ciclo de vida que proporciona el enrutador. Estos son:

• canReuse
• canDeactivate
• OnActivate
• onReuse
• onDeactivate

Luego está @canActivate. Este es un gancho especial porque se llama antes de que su componente sea instanciado. Sus parámetros son (next, previous) que son los componentes que enrutamiento hacia y el componente del que proviene (o null si no tiene historial) respectivamente.

import {Component} from '@angular/core';
import {ROUTER_DIRECTIVES, CanActivate, OnActivate} from '@angular/router';

@Component({
    selector: 'news',
    templateUrl: 'newsView.html',
    directives: [ROUTER_DIRECTIVES]
})

@CanActivate((next) => {
    return messageService.getMessage()
        .then((message) => {
            next.params.message = message;
            return true; //truthy lets route continue, false stops routing
        });
})

export class Accounts implements OnActivate {

    accounts:Object;

    onActivate(next) {
        this.message = next.params.message;
    }
}

Lo que aún no he descubierto es cómo obtener el resultado de la promesa en su OnActivate, aparte de almacenarlo en su 'siguiente' componente. Esto es debido a que onActivate también es sólo invoca con next y anteriores y no el resultado de la promesa. No estoy contento con esa solución, pero es lo mejor que se me ocurrió.

Https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html "resolve" ha sido devuelto al router angular2, pero la documentación es escasa.

Ejemplo:

class TeamResolver implements Resolve {
  constructor(private backend: Backend) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
    return this.backend.fetchTeam(this.route.params.id);
  }
}
bootstrap(AppComponent, [
  TeamResolver,
  provideRouter([{
    path: 'team/:id',
    component: TeamCmp,
    resolve: {
      team: TeamResolver
    }
  }])
);

Puede crear su Resolutor en Angular2+ y aplicarlo al router con bastante facilidad. mira lo siguiente, aquí está la forma de crear el Solucionador en Angular:

@Injectable()
export class AboutResolver implements Resolve<Message> {

  constructor(private aboutService: AboutService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    const id = route.params['id'];
    return this.aboutService.getById(id);
  }
}

Luego en la configuración del router:

export const Routes: RouterConfig = [
  { path: 'about',  component: AboutComponent, resolve: { data: AboutResolver } }
]; 

Y finalmente en tu componente:

ngOnInit() {
  this.route.data.subscribe((data: { about: About }) => {
    this.about = data.about;
  });
}