値によって4つの方法でルーティングと角度ジャンプ

ルーティングの伝統的な価値観

伝送パラメータは、インデックス値せキー=インデックスが対応するブラウザ・パラメータに表示され、この場合を渡すことに注意しなければならないステップ1ルートこれは、疑問符である：？8080 /ニュースID = localhostの 2＆名前=暁

<divのクラス = " Z-shebei-BOX1 X-mysh-P "   スタイル= " 幅：100％; " * ngFor = " deviceInfo.listの項目を聞かせて、キー=インデックスを聞かせて。' > 
     <a [routerLink]= "['/devicepay']" [queryParams]= "{id:key}"> 
         <UL> 
           <LI> {{アイテム}} </ LI> 
         </ UL> 
     </ A > 
 </ div>

受信されたパラメータを超えるステップ2パス注：受信時queryParamsを受信することによって

最初：ActivatedRouteを導入} {インポートから ' 角@ /ルータ' 
RE：声明：コンストラクタ（パブリックルート：ActivatedRoute）{}は、
受信した：// オーバー受信値通過
    この .route.queryParams.subscribe（（RES）=>を{ 
      console.log（RES）
    }）

第二に、動的ルーティング伝統的な値は、この場合に表示されるブラウザに対応するパラメータである対角線であるローカルホスト：8080 /ニュース/ ID = 2＆名前=暁を

ステップ1は、経路に構成されています

{パス：' devicepay /：ID '、成分：DevicepayComponent}

HTMLをジャンプしてステップ2 interface

<divのクラス = " Z-shebei-BOX1 X-mysh-P "   スタイル= " 幅：100％; " * ngFor = " deviceInfo.listの項目を聞かせて、キー=インデックスを聞かせて。' > 
      <a [routerLink]= "['/devicepay/',key]"> 
           <UL> 
            <LI> {{アイテム}} </ LI> 
         </ UL> 
      </a>の
  </ div>

受信機インタフェースパラメータに対する別のパスでは、ステップ3注：paramsは受信ダイナミックルーティングを使用する場合

ActivatedRoute}導入{インポートから ' @角/ルーター' 
：文：コンストラクタ（再パブリックルート：ActivatedRoute）{} 
受け取っ：// 受信値パス上に
    この。.Route paramsは .subscribe（（RES）=> { 
      コンソール。ログ（RES）
    }）

第三に、JS動的ジャンプ方法は、主被写体で使用され

ステップキー値内部に渡さ1 HTMLは、指標値取得サイクルであることに注意してください

<ボタン（クリック）= ' gotoDevicePay（キー）' >決済画面は、</ button>のにジャンプします

次のように記述されたステップ2のルーティング・ファイル・フォーマット

{パス：' devicepay '、成分：DevicepayComponent}

でジャンプをルーティングするステップ3 JS

// 最初に導入 
インポート} {ルータから 「@角度/ルータ」
// 修正再表示の 
コンストラクタ（パブリックルーター：ルーターは）{} 

// クリックイベントを定義 
gotoDevicePay（キー）：無効{ 
    //パスは、ダイナミックジャンプジャンプを達成するためにデータ転送
    この .router.navigateを（[ ' / devicepay / ' ]、{queryParams：{ID：キー}}）
  }

第四に、パラメータの数は、次の画面モードに到達するために通過することができます

ステップ1はNavigationExtras導入され、

インポート{ルータ、NavigationExtras} から 「角/ルーター@ 」。

ステップ2. NavigationExtrasで、goNewsContentジャンプが実行されるメソッドを定義します。

goNewsContent（）{ 
    navigationExtrasを聞かせ：NavigationExtras = { 
    queryParams：{ ' SESSION_ID '：' 123 ' }、
    フラグメント：' アンカー' 
    }; 
    この .router.navigate（[ ' /ニュース' ]、navigationExtras）。
}

ステップ3.上を通過値を取得します

コンストラクタ（プライベートルート：ActivatedRoute）{ 
   にconsole.log（この.route.queryParams）。
}

値によって4つの方法でルーティングと角度ジャンプ

おすすめ