学習角度+ルーティング学習（ファイブ）マルチルーティング輸出

第2の経路では、それは違いを命名することなく、メインルートとrouteコマンドであります：
- ルーティングおよび主要ルーティングネーミング相互依存
- ルート名前のメインルートは唯一の非名前のルートをサポートすることができるが、他の経路は、組み合わせて使用することができます
- 名前付きルートは、コマンドの輸出上に表示することができます
素人の面では、<ルータ-アウトレット> </ルータ・アウトレット>ルーティングモジュールの輸出、また、メインモジュールに配置されたこのモジュール;今私は、モジュールを追加したいことがあり、第二の輸出ルートとして名付けられたルートを使用して、これを示しますモジュールのメインモジュール。
使用法：app.component.htmlメインページでは、第二の出口ルートを追加し、ナビゲーションを追加します

<！ - 以下の内容は唯一のプレースホルダーがあり、交換することができます。- > 
< H1 >角ルータ</ H1 > 
< NAV > 
  <！ - 路由跳转一- > 
< [routerLink] = "[ '/危機-センター']" routerLinkActive = "アクティブ" >クライシスセンター</ A > < [routerLink] = "[ '/英雄']" routerLinkActive = "アクティブ" >英雄</ A > <！ -第二路由的导航显示- >


名刺</a>の<a [routerLink]="[{ outlets: {popup: ['compose']}}]">第2のルーティング
  <！ - ルーティングジャンプ2 - > 
<！ - <A routerLink = "/危機-センター" routerLinkActive = "アクティブ">クライシスセンター</a>
routerLink = "/ヒーロー" routerLinkActive = "アクティブ">英雄</a>の<a -> 
</ NAV > 
<！ - ルーティング出口、プレースホルダは、出口アセンブリは、ここに示されている表示することができます- > 
<！ - 移行は：@routeAnimationルーティングをトリガするためにバインドされてみましょう、routerOutletの輸出は、変数出口参照をエクスポートするルートをバインドするアニメーション要素に適用する必要があります
    activatedRouteを提供されたデータオブジェクトの属性を返すようにアニメーション機能
- > 
< divの[@routeAnimation] = "getAnimationData（routerOutlet）" > 
    < ルータ-アウトレット#routerOutlet = "アウトレット" > </ ルータ・アウトレット> 
  </ divの> 
<！ - 各モジュールには、ルータがサポートすることができます出口未知プライマリルートは、ルーティングモジュール同時に経路に応じて異なるコンテンツを表示するために、出口名を複数有していてもよい- > 
  <！ - 第2のルーティング口：メインルートに依存しない、ルートが他と組み合わせて使用することができ、表示輸出位置指令で- > 
  < ルータ-アウトレット名=「ポップアップ」> </ ルータ、アウトレット>

G成分COMPOSEメッセージをngの、第二の輸出ルートとして表示コンポーネントを可能にするコンポーネントを作成します
メインモジュールルーティングに第2経路。

インポート{NgModule}角度/コア@ 'から。
インポート{ルート、RouterModule}から「@角/ルーター」。


インポート{PageNotFoundComponent} './page-not-found/page-not-found.component' 。
インポート{ComposeMessageComponent} './compose-message/compose-message.component' 。
// 添加第二路由 
CONST経路：経路= [
   {パス： 'コンポーズ'、成分：ComposeMessageComponent、出口： 'ポップアップ' }、 
  {パス： ''、redirectTo： 'ヒーロー'、pathMatch '完全' }、
  {パス： '**' 、成分：PageNotFoundComponent}

];
// .forRoot（） -トップレベルのルータのアプリケーション、サービスプロバイダーやルーティング命令は、必要に応じて、現在のURL実行するための最初の時間のためのブラウザベースのナビゲーション
// enableTarcingを-ビューナビゲーションイベントは、ライフサイクル、および出力で発生しましたコンソール
@NgModule（{
  輸入：[
    RouterModule.forRoot（ルート、{enableTracing：偽}）
  ]、
  輸出：[RouterModule]
}）
エクスポートクラスAppRoutingModule {}

コンポーネントコードコンポーズメッセージ

< H3 >コンタクトセンタークライシス</ H3 > 
< divの* ngIf = "詳細" >
  {{}}詳細
</ DIV > 
< DIV > 
  < DIV > 
    < ラベル>メッセージ：</ ラベル> 
  </ DIV > 
  < DIV > 
    < TEXTAREA [（ngModel）] = "メッセージ" 行= "10" COLS = "35" [無効] = "送信" > </ TEXTAREA > 
  </ DIV > 
</ DIV > 
< P * ngIf "送信！" = > 
  <ボタン（クリック）= "（送信）" >送信</ ボタン> 
  < ボタン（クリック）= "キャンセル（）" >キャンセル</ ボタン> 
</ P >

インポート{コンポーネント、HostBinding}角度/コア@ 'から。
インポート{ルータ}から「角/ルーター@」。

@成分（{
  セレクタ：「アプリケーション・メッセージを構成します」、
  templateUrl： './compose-message.component.html' 、
  styleUrls：[」./compose-message.component.css' ]
}）
輸出クラスComposeMessageComponent {
  詳細：文字列。
  メッセージ：文字列。
  送信 = falseを。

  コンストラクタ（プライベートルータ：ルータ）{}

  {送信（）
    この .sending = 真;
    これは、「メッセージを送信する...」= .details 。

    setTimeout（（） => {
       この .sending = 偽;
       この.closePopup（）。
    }、 1000年）。
  }

  {キャンセル（）
    この.closePopup（）;
  }
//   第2の経路をクリアする、すなわちリムーバブルルーティング出口、ナビゲーション表示URLクリア
  closePopupを（）{
     // `名前出口に値をNULL`提供
    //は内容アウトレットザ命名クリア
    この .router.navigate（[{アウトレット：{ポップアップ：ヌル}}]）。
  }
}

ビューの表示

学習角度+ルーティング学習（ファイブ）マルチルーティング輸出

おすすめ