角2親コンポーネントからルータアウトレットに変数を渡す方法

Question

私が見つけたすべてのチュートリアルと回答は、入力を使用して親コンポーネントから子コンポーネントに変数を渡す方法のみを示していますが、この子コンポーネントはルータ内に含まれています親テンプレートの中に直接はありませんか？

例：

主成分この例ではそう

@Component({ 
    selector: 'my-app', 
    template: ` 
      Main page 
      <router-outlet></router-outlet> 
       `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { path: '/contact', name: 'Contact', component: ContactComponent}, 
]) 

export class AppComponent{ 
    public num:Number = 123; 
} 





@Component({ 
    selector: 'contact-page', 
    template: 'contact page' 
}) 
export class ContactComponent{ 
    public num:Number; 
} 

主成分テンプレート子接触コンポーネントがレンダリングされるルータのコンセントが含まれているが、どのように私は、変数を取得することができます「NUM」親コンポーネントのルータ出口で評価された子コンポーネントの値??

Answer 1

現在、ルータによって追加されたコンポーネントにバインドすることはできません。追加されたコンポーネントとの間でデータをやりとりしたり、イベントを購読したりするには、代わりに共有サービスを使用します（ここではたくさんの例があります）。あなたのデータが不変であるならば、この問題https://github.com/angular/angular/issues/4452特にこのコメントhttps://github.com/angular/angular/issues/4452#issuecomment-153889558

Answer 2

は、あなたがRouteDataを使用することができます

も参照してください。

@Component({...}) 
@RouteConfig([ 
    { path: '/contact', name: 'Contact', component: ContactComponent, data: {num: 123}}, 
]) 
export class AppComponent { 
} 

@Component({...}) 
export class ContactComponent { 
    public num:Number; 
    constructor(data: RouteData) { 
    this.num = data.get('num'); 
    } 
} 

は、子のルートにハードコードしたくないいくつかの設定オプションを渡すことが有用であろう。しかし、データが変更されることを期待している場合は、別の方法が必要です。

Answer 3

私はちょうどこの質問を見つけた、ここで私は同様の問題を解決した方法です。

私はこれを解決するサービスを使用します。そうすれば、すべての子と親がプロパティを設定することができ、変更はすべてのサブスクライバに対して伝播されます。最初に私はReplaySubjectをカプセル化のみ観察可能返すために、公共のgetterとsetterを持つ民間BehaviorSubjectでサービスを作成します。

private _property$: BehaviorSubject<number> = new BehaviorSubject(1); 

set property(value: number) { 
    this._property$.next(value); 
} 

get property$(): Observable<number> { 
    return this._property$.asObservable(); 
} 

新しいBehaviorSubjectを使用する理由を（1）に初期値を設定することです1ので、購読するものがあります。 oninitを両親に

、私は、プロパティの南東デフォルト値（数値）になります。子コンポーネントのの一つ以上で

private _propertySubscribtion: Subscription 

ngOnInit() { 
    // set default value to 5 
    this._componentService.property = 5; 

    // If property is updated outside parent 
    this._componentService.property$.subscribe(p => { 
     this.property = p; 
    }); 
} 

ngOnDestroy() { 
    this._propertySubscribtion.unsubscribe(); 
} 

、変更のために購読することが可能に：

private _propertySubscribtion: Subscription 

ngOnInit() { 
    this._propertySubscribtion = this._componentService.property$.subscribe(p => { 
     this.property = p; 
    }); 
} 

ngOnDestroy() { 
    this._propertySubscribtion.unsubscribe(); 
} 

そして、いくつかの子供や親がプロパティを更新する場合：

updateProperty() { 
    // update property 
    this._componentService.property = 8; 
} 

すべての加入者はそれについて知っているだろう。