在Angular2路由中使用Resolve

时间:2015-11-01 13:15:53

标签: angular angular2-routing

在Angular 1中,我的配置如下所示:

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

如何在Angular2中使用resolve?

5 个答案:

答案 0 :(得分:28)

正如alexpods已经提到的那样,似乎并不是一个“解决方案”。因此。这个想法似乎是你利用了路由器提供的生命周期钩子。这些是:

  • canReuse
  • canDeactivate
  • onActivate
  • onReuse
  • onDeactivate

然后是 @CanActivate 。这是一个特殊的钩子,因为它是在实例化组件之前调用的。它的参数是(next, previous),它们是您路由到的组件以及您来自的组件(如果您没有历史记录,则为null)。

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

我还没想到的是如何将承诺的结果记录到你的onActivate中 - 除了将它存储在你的下一个'零件。这是因为 onActivate 也只能使用 next previous 调用,而不是promise的结果。 我对这个解决方案不满意,但它是我能想到的最好的解决方案。

答案 1 :(得分:28)

基于@ angular / router v3-beta,这些是必需的步骤。

实现一个返回Observable或普通值的解析器:

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

}

请注意,如果您返回一个observable,则可以通过route.snapshot.data获取展开的值(第一个)。 如果你希望observable本身可用,那么你需要将它包装在另一个Observable中:

return Observable.of(source$);

将解析器添加到您的路线:

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

最后,提供您的解析类以及对引导程序或主要组件providers的任何依赖关系:

bootstrap(AppComponent, [
    HeroesResolver, HeroService
])

从ActivatedRoute实例获取已解析的数据:

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

请记住,快照表示组件类和解析程序类中执行状态的值。 使用这种方法无法从params更新中刷新数据。

Plunker:http://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P?p=preview 来源材料:https://github.com/angular/angular/commit/f2f1ec0#diff-a19f4d51bb98289ab777640d9e8e5006R436

答案 2 :(得分:9)

https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html &#34;解决&#34;已被带回angular2路由器,但文档很少。

示例:

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

答案 3 :(得分:5)

您可以在Angular2 +中创建解析器,并将其轻松应用到路由器。看下面的内容,下面是在Angular中创建Resolver的方法:

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

然后在路由器配置中:

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

最后在你的组件中:

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

答案 4 :(得分:3)

@AndréWerlang的答案很好,但如果您希望页面上已解析的数据在路径参数更改时更改 ,则需要:

<强>解析器:

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

您的组件:

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