角度8の設定ルーティング

まず、世代のルーティングファイル

従来、このモジュールのクラス名のルーティングを設定する別のモジュールは、内のsrc /アプリに位置AppRoutingModule、APP-routing.module.tsファイルが存在しています。

それを生成するために、CLIを使用しました。

NGモジュールアプリルーティング--flat --module =アプリを生成します

そして、次の世代の成功は、SRC / appディレクトリを参照する場合。

次に、生成されたファイルを参照してください。

インポート{NgModule}角度/コア@ 'から。
インポート{CommonModule}角度/共通@ 'から。

@NgModule（{ 
  輸入：[ 
    CommonModule 
  ]、
  宣言：[] 
}）
エクスポートクラスAppRoutingModule {}

通常は、コンポーネントのルーティングモジュールを宣言していないので、あなたは削除することができ、削除の参照を。@NgModule.declarationsCommonModule

第二に、輸出RouterModule

現時点でAppRoutingModuleはこれです：

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

@NgModule（{ 
  輸出：[RouterModule] 
}）
エクスポートクラスAppRoutingModule {}

第三に、定義されたルートを追加

角度典型的な経路（ルート）は、2つの特性を有します。

1、パス：ブラウザのアドレスバーの試合でURLの文字列に1つ。

2、コンポーネント：コンポーネントが作成されなければならない経路をこのルートをナビゲートします。

// localhostを：：;ルートでそれを参照するためにあなたがHomePageComponentをインポートしたいすべての最初のホームページは、4200 /あなたはURLはhttp時に言いたい場合。

次のように：

インポート{NgModule}角度/コア@ 'から。
「@角/ルーター」からインポート{RouterModule、ルート}。
"../home-page/home-page.component"からインポート{HomePageComponent}。

CONSTルート：ルート= [ 
  {パス： 'ホームページ'、成分：HomePageComponent} 
]。
@NgModule（{ 
  輸出：[RouterModule] 
}）
エクスポートクラスAppRoutingModule {}

RouterModule.forRoot（）

ルータを初期化し、そしてそれは、ブラウザのアドレスの変更を監視するために開始します。（に追加された配列）@NgModule.imports

輸入：[RouterModule.forRoot（ルート）]、

注意：

AppRoutingModuleビューapp.module.tsファイルが導入されています。

'./app-routing/app-routing.module' からインポート{AppRoutingModule}。

輸入：[ 
    AppRoutingModule 
  ]、

第四に、輸出はルートを追加します

<ルータ・アウトレット>のAppComponentが追加テンプレートを開き、<ルータ・アウトレット>ここでルートを表示しようとしているように、ルータに指示します。

<ルータ・コンセント> </ルータ・コンセント> // SRC /アプリ/ app.component.html

第五に、プロジェクトを実行

Viewプロジェクトページ、あなたのCLIコマンドラインがまだ実行されているかどうかに注意を払います：

サーブ

アドレスバーには、を入力します。http：// localhostのは：4200、あなたはアドレスバーが表示されます。この時間は、プロジェクトのタイトルではなく、コンテンツHomePageComponentディスプレイが表示されます。

第六に、デフォルトルートを追加

方法の一つ：プロジェクトが始まったとき、ブラウザのアドレスバーにサイトのルートパスを指します。これは、既存のルートに一致しない場合、ルータは任意の場所に移動しません。

アプリケーションは自動的に、ダッシュボードにナビゲートAppRoutingModule.routes配列に次のルートを追加してみましょう。

{パス： ''、redirectTo： '/ホームページ'、pathMatch： '' フル}

今、あなたは、デフォルトではアドレスバーが空のパスルーティング「/ホームページ」にリダイレクトされますでしょう、プロジェクトを再度アクセスし;そして家もHomePageComponentがロードされています。

方法2：

{パス： '**'、成分：DashboardComponent}

これは、ルートURLが「」に等しいとき、DashboardComponentコンポーネントをロードするためになることを意味する;ので、あなたのサービスポート番号を実行します。localhostを：4200は、最初のロードコンポーネントになりますが。

**パスは、ワイルドカード、彼は離れて上記複数のパスから、任意のパスがロードされますDashboardComponentコンポーネントは、最終的ルーティング構成に書くことを覚えておいてくださいと言いました。

七、ルーティングリンクを追加（routerLink）

それだけで、ユーザーがアドレスバーのルートにURLを貼り付けできるようにするべきではありません。彼らはまた、移動するためのリンクをクリックすることができるはずです。

追加 <nav> 要素を、どこでクリックされたとき、リンク<a>要素を入れて、のDetailsComponentへのナビゲーションをトリガーします。

<div>の
  ホーム・ページの作品！
  <ナビゲーション> 
    <a routerLink="/details">点击查看详情する</a> 
  </ NAV> 
</ div>

DetailsComponentもAppRoutingModuleに導入する必要があります。

このリンクの詳細についてはをクリックしてください。住所/詳細にバー、および詳細ページにジャンプするページ。

八、追加詳細ビュー（HTMLパラメータの受け渡し）

今、私たちは記事のリストに表示する必要があると仮定し、その後、我々は記事の詳細を渡す表示するには、各をクリックする必要があり、私たちはHTTPに似た詳細ビューの記事11のIDに移動したい場合：// localhostを：URL 4200 /ヒーロー/ 11代。

まずオープンAppRoutingModuleと輸入HeroesComponent。

"./heroes/heroes.component" からインポート{HeroesComponent}。

次いで、パラメトリックにルートを追加 AppRoutingModule.routes 配列は、記事詳細ビューへのパスと一致する必要があります。

{パス： 'ヒーロー/：ID'、成分：HeroesComponent}

path コロン（:）を表す :id 特定の主人公を表すプレースホルダを、 id。

現時点では、ルートは行く準備ができています。

その後、我々は、彼らが記事の詳細ページパラメータ化ルートにナビゲートすることができるように、HTMLページ内のリンクをジャンプの記事のリストを変更する必要があります。

<NAV> 
    <a routerLink="/heroes/{{id}}">記事詳細</a>を見るためにクリック
    <！ -アレイ形式質量参加を- > 
    <A [routerLink] =「[ '/英雄、 NUM]「>記事詳細</a>のこちらをクリックしてください
。</ NAV>

今、私たちは、ビュー記事の詳細をクリックして、ページを更新し、あなたはアドレスバーがHTTPに変更されていることを見つける：// localhostを：4200 /ヒーロー/ 11、ページの表示には、記事の詳細ページモジュールにジャンプする必要があります。

九、JSページ移動（パラメータの受け渡し）

あなたはHeroesComponentときAppRoutingModuleに導入され、パラメトリックにルートを追加し AppRoutingModule.routes 、アレイ。

私たちは今、HeroesComponent（いくつかの一般的に使用される方法）にjsのジャンプでパラメータを渡す必要があります。

1、まず、次のimport文を追加します。

インポートから{ルータ} '@角度/ルータ'; //引入

その後、ある ActivatedRouteプライベート変数にその値を保存するために、コンストラクタに注入しました：

コンストラクタ（プライベートルータ：ルータ）{} //コンストラクタに注入します

2、配達ルートパラメータ

単一パラメータの受け渡し

その効果は同じであるので、移動（）メソッドは、routerLink命令とパラメータの型と同じをサポートしています。

this.router.navigate（[ 'ヒーロー'、ID]）。

または：

this.router.navigate（[ 'ヒーロー']）。

マルチパラメータ転送

this.router.navigate（[ 'heroDetail']、{queryParams：{商品コード： '1'、タイトル： '月'}

3、我々はそこであることに注意：これは、絶対的なルートと呼ばれるnavigateByUrl（）;

this.router.navigateByUrl（ 'ホーム'）;

差：navigateByUrl（）および移動（）は異なる点である：navigateByUrlルーティングアドレスパラメータに応じて決定されません。

IDから抽出されたテン、ルーティングパラメータ

1、まず、次のimport文を追加します。

インポート{ActivatedRoute}角/ルーター@ 'から。

その後、ある ActivatedRouteプライベート変数にその値を保存するために、コンストラクタに注入しました：

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

ActivatedRoute これに保持している HeroDetailComponent ルーティング情報インスタンス。URLから抽出されたルーティングパラメータに興味このコンポーネント。どの id パラメータ英雄表示されることになります id。

2、ルーティングパラメータを取得します

この方法の一つ：

this.route.queryParams.subscribe（queryParams => { 
        [商品= queryParams.productIdせ、
        表題= queryParams.titleを聞かせ; 
    }）;

方法2：

コードは以下の通りであります：

  公共のparams; //公有变量
  ngOnInit（）{ 
    this.getData（）。
  } 
  のgetData（）{ 
     this.route.params.subscribe（
       paramsは=> { 
          this.paramsの=のparamsは、
          にconsole.log（this.params）; 
       } 
    ）; 
  }

そのようなオブジェクトは、その上にIDへの直接アクセスを得られます。

方法3：

コードは以下の通りであります：

ngOnInit（）：ボイド{ 
  this.getData（）。
} 

のgetData（）：ボイド{ 
  CONST ID = + this.route.snapshot.paramMap.get（ 'ID'）。
  console.log（ID）。
}

XI、同じルートバック

1、まず、次のimport文を追加します。

インポート{場所}角度/共通@ 'から。

そして、 Location サービスはでプライベート変数にその値を保存するために、コンストラクタに注入されています。

コンストラクタ（
  プライベート場所：ロケーション
）{}

location アンギュラは、ブラウザに対処するためのサービスです。その後、あなたは前のビューに戻ってナビゲートするためにそれを使用します。

2、ページに戻るをクリックします。

また、あなたのエントリを買う前のページに戻るには、ブラウザの[戻る]ボタンをクリックします。

ベースアセンブリのテンプレートを追加して、成分のGoBack（）メソッドにバインドするための戻るボタン。

<ボタン（クリック）= "GOBACK（）">戻る</ボタン>

コンポーネントクラスに追加 goBack() する方法、注射の使用Location バック履歴スタックブラウザのステップ以降のサービス。

GOBACK（）：ボイド{ 
  this.location.back（）。
}

まず、世代のルーティングファイル

第二に、輸出RouterModule

第三に、定義されたルートを追加

RouterModule.forRoot（）

第四に、輸出はルートを追加します

第五に、プロジェクトを実行

第六に、デフォルトルートを追加

七、ルーティングリンクを追加（routerLink）

八、追加詳細ビュー（HTMLパラメータの受け渡し）

九、JSページ移動（パラメータの受け渡し）

IDから抽出されたテン、ルーティングパラメータ

XI、同じルートバック

おすすめ