ウェブサイト検索

TypeScript - Angular2 RC1、新しいルーターとデータの受け渡し

以前は、非推奨のルーターを使って、同じコンポーネントにルーティングするいくつかのコンポーネントがありました:

いくつかのコンポーネント

import {Component, Injector} from 'angular2/core';
import {IDataServiceSome} from './IDataServiceSome';
import {RouteData} from 'angular2/router';

@Component({
    selector: 'Some',
    templateUrl: './Some.html'
})
export class Some {
    Model;
    DataService: IDataServiceVendor;

    constructor(routeData: RouteData, injector: Injector) {
        var dataServiceToken = routeData.get('DataServiceToken');
        this.DataService = injector.get(dataServiceToken);
        this.Model = DataService.getSomeModel();
    }
}

IDataServiceSome

export interface IDataServiceSome {
    getSomeModel(): Object;
}

例：Comp1 ですが、Comp2、Comp3 などもあります…

import {Component} from 'angular2/core';
import {RouteConfigs, Router, ROUTER_DIRECTIVES} from 'angular2/router';

import {DataServiceSome1} from './IDataServiceSome1';

@RouteConfigs([
    { path: '/Some', name: 'Some', component: Some, data: { DataServiceToken: DataServiceSome1 } }])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [DataServiceSome1],
    selector: 'Comp1',
    template:
    `<div>
        <router-outlet></router-outlet>
        <h1>Comp1 routed to Some</h1>
    </div>`
})
export class Comp1{

}

ご想像の通り、IDataServiceSome を実装する多くのデータサービスや、Some にルーティングする多くのコンポーネントがあります。どのデータサービスを使用するかの選択は、injector に知られているデータトークンを使用して Some コンポーネントにルーティングする任意のコンポーネントから行われます。rc1 リリースおよび新しいルーターでは、RouteData は非推奨または削除されましたが、このシナリオは今後どのように実装されるのでしょうか？

回答 #1

更新

RC.4 は data を戻します

  • ルートを使ってデータを渡す
{ path: 'parent/:id', data: {one: 1}, resolve: {two: 'resolveTwo'}}

そしてそれにアクセスする

this.route.snapshot.data

または

this.route
      .data
      .subscribe(v => console.log(v));

https://github.com/angular/angular/issues/9757#issuecomment-229847781 の Plunker も参照してください

オリジナル

パラメータは次のように渡すことができます:

  • ルータリンク付きで
<a [routerLink]="['/crisis-center', {bar: 'foo1'}]">Crisis Center</a>
  • router.navigate() を使って
this.router.navigate(['/crisis-center', {bar: 'foo2'}]);

Plunkerの例

app/app.component.ts にはパラメータが渡されるリンクとコードが含まれており、app/crisis-center/crisis-center.component.ts にはパラメータが読み取られ、コンソールに書き込まれるコードが含まれています。

もう追加データのサポートはないと思います。

回答 #2

Angular2がデータを追加してくれるのを待ちましょう。私の場合、どのデータサービスが必要かを決めるサービスをDI経由で注入できます。私はそれが過剰だと感じました。URLクエリの文字列と同様にパラメータを渡すだけのものです。違いは、より良い体験のためにパラメータがユーザーに見えないようにすべきだということでした。

出典：

http://www.github.com/angular/angular/issues/8515

関連記事