コンポーネントのバッククリックにどのように状態を正常に渡すことができますか？

Question

私は単純なシナリオを持っています。

私はAngular2 app.module configにコンポーネントを登録しています。

routes = [ 
{ path: "/home", component: HomeComponent, data : { info : "hello world" }]; 

は今、私は、左または右にアニメーション化できるように、いくつかの条件に基づいて異なる値と情報の変数バージョンを渡す同じページを呼び出すことがしたいですか？私は以下を含む多くのことを試しましたが、そのうちのどれも私のために働いていませんでした。さらに検査後

router.navigate(["/home", {info : "hello again" }]); 

私は、ルート内データは一種の私の計画にレンチを置くだけの静的な情報のためであることに気づきました。私がバックボタンをクリックすると、スライドの左または右のトランジションを持つフォワードアニメーションではなく、バックアニメーションを使用するフラグを設定するすべてのページのクリックにデータを渡すことができます。

これは、魅力的ではないものも含めたいくつかの考慮事項だけを残しています。重複したルート定義は、「まったくありません！」すべてのコンポーネントに変数を渡すように守ってくれます。私が避けようとしていた最後はグローバル変数です。私はそれ以外の場合は洗練された解決策を見ません。彼らはそこにいると確信していますが、私は現在盲目になっています。

Answer 1

ルータおよびActivatedRouteを使用して、2つのコンポーネント間でデータを通信できます。

呼び出し側が次の操作を行います：

import { Component, OnInit } from '@angular/core'; 
import { Router, NavigationExtras } from "@angular/router"; 

@Component({ 
    selector: 'caller-component' 
}) 
export class CallerComponent implements OnInit { 

    constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 

    } 

    navigate(){ 
    //called when a specific link is clicked in the template 
    let extraData: NavigationExtras = { 
     queryParams: { 
     "prop1": "Hello Home!", 
     "prop2": "I am back" 
     } 
    }; 
    this.router.navigate(['/home'], extraData); 

    } 

} 

そして、あなたの家の構成要素は、それらのパラメータを傍受する方法を学習する必要があります。

import { Component, OnInit } from '@angular/core'; 
import { ActivatedRoute } from "@angular/router"; 

@Component({ 
    selector: 'home-component' 
}) 
export class HomeComponent implements OnInit { 

    constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 

    this.route.params.subscribe(params => { 
     //Do something here with the values you receive 
     console.log(params.prop1); 
     console.log(params.prop2); 
    }); 
    } 

}