example - router.navigate angular 6

Uso de Resolver en rutas Angular2

Question

En Angular 1 mi configuración se ve así:

$routeProvider
  .when("/news", {
    templateUrl: "newsView.html",
    controller: "newsController",
    resolve: {
        message: function(messageService){
            return messageService.getMessage();
    }
  }
})

¿Cómo usar resolver en Angular2?

Answer 1

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

Implemente una resolución que devuelva un Observable o un valor simple:

@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 (primero) estará disponible a través de route.snapshot.data . Si desea que el observable esté disponible, debe envolverlo en otro Observable:

return Observable.of(source$);

Agregue el resolutor a su ruta:

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

Finalmente, proporcione su clase de resolución y cualquier dependencia a bootstrap o sus providers componentes principales:

bootstrap(AppComponent, [
    HeroesResolver, HeroService
])

Consume los datos resueltos de una instancia de ActivatedRoute:

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

Recuerde que la instantánea significa el valor en el estado de ejecución, tanto en la clase componente como en la clase resolutor. Los datos no se pueden actualizar a partir de actualizaciones de parámetros con este enfoque.

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

Answer 2

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

• canReuse
• canDeactivate
• onActivate
• onReuse
• onDeactivate

Luego está @CanActivate . Este es un enlace especial porque se llama antes de que su componente sea instanciado. Sus parámetros son (next, previous) que son los componentes a los que está enrutando y el componente del que proviene (o nulo 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 ''próximo'' componente. Esto se debe a que onActivate también solo se invoca con next y previous y no con el resultado de la promesa. No estoy contento con esa solución, pero es lo mejor que se me ocurrió.

Answer 3

La respuesta de @ AndréWerlang fue buena, pero si desea que los datos resueltos en la página cambien cuando cambie el parámetro de ruta , debe:

Resolver

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

  constructor(private messageService: MessageService, private router: Router) {}

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

Su componente:

ngOnInit() {
  this.route.data.subscribe((data: { message: Message }) => {
    this.message = data.message;
  });
}

Answer 4

Puede crear su Resolver en Angular2 + y aplicarlo al enrutador con bastante facilidad. mira a continuación, esta es la forma de crear el Resolver 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 enrutador:

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;
  });
}

Answer 5

https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html "resolve" se ha devuelto al enrutador 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
    }
  }])
);