32

Angular 1 では、私の設定は次のようになります。

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

Angular2でリゾルブを使用するには?

4

5 に答える 5

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

}

オブザーバブルを返す場合、ラップされていない値 (最初の値) は を通じて利用できることに注意してくださいroute.snapshot.data。オブザーバブル自体を利用可能にしたい場合は、それを別のオブザーバブルでラップする必要があります。

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 の更新からデータを更新することはできません。

プラン カー: http://plnkr.co/edit/jpntLjrNOgs6eSFp1j1P?p=preview

于 2016-07-11T17:59:36.767 に答える
28

alexpods が既に述べたように、そのような「解決」はないようです。ルーターが提供するライフサイクルフックを利用するという考えのようです。これらは：

  • 再利用可能
  • 非アクティブ化できます
  • 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 の結果ではないためです。私はその解決策に満足していませんが、私が思いつくことができる最高のものです.

于 2015-12-08T15:41:29.533 に答える
9

https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html 「解決」は 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
    }
  }])
);
于 2016-07-05T13:16:25.647 に答える
5

Resolver を Angular2+ で作成し、ルーターに簡単に適用できます。以下を見てください。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);
  }
}

次に、ルーター構成で：

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

そして最後にあなたのコンポーネントで：

ngOnInit() {
  this.route.data.subscribe((data: { about: About }) => {
    this.about = data.about;
  });
}
于 2017-06-22T13:45:02.567 に答える