Angularルーティングの基礎の詳細な説明

1. ルーティング関連オブジェクト
2. ルーティングオブジェクトの場所
3. ルーティング構成
4. コード内のRouterオブジェクトをナビゲートする
5. 存在しないパスの設定
6. リダイレクトルーティング
7. ルーティング中にデータを渡す

1. ルーティング関連オブジェクト

Router と RouterLink には、ナビゲーションという同じ機能があります。コントローラーではルーターが使用され、テンプレートでは RouterLink が使用されます。

2. ルーティングオブジェクトの場所

1. ルートオブジェクト

設定はモジュール内にあります。ルートは構成情報のセットから構成され、各構成情報には少なくとも 2 つの属性 (パスとコンポーネント) が含まれます。

2. ルーターアウトレット

テンプレート内

3.ルーターリンク

テンプレート内のリンクを生成し、URLを変更する手順

4. ルーター

コントローラーでは、ルートを切り替えるために Router オブジェクトの navigation メソッドを呼び出します。

5. アクティブルート

ルーティング時に、データは URL を介して渡され、ActivatedRoute オブジェクトに保存されます。

3. ルーティング構成

ng new --routingパラメータを使用すると、追加のapp-routing.module.tsファイルが生成されます。

'@angular/core' から NgModule をインポートします。
'@angular/router' から Routes、RouterModule をインポートします。

const ルート: ルート = [];

@Ngモジュール({
  インポート: [RouterModule.forRoot(routes)],
  エクスポート: [RouterModule]
})
クラス AppRoutingModule をエクスポートします { }

app.module.ts に自動的にインポートされます。

ホームコンポーネントとコンポーネントコンポーネントの 2 つのコンポーネントを生成します。

const ルート: ルート = [
  {path: '', コンポーネント: HomeComponent}, //パスが空です{path: 'product', コンポーネント: ProductComponent}
];

知らせ：

1. パス設定はスラッシュで始めることはできず、path:'/product' として設定することもできません。

Angular ルーターは URL を解析して生成するため、/ で始まらないことで、複数のビュー間を移動するときに相対パスと絶対パスを自由に使用できます。

2. テンプレートにパスを記述する場合は、/ で始まる必要があります。

スラッシュと . を使用すると、ルートルート (/) に移動するべきか、サブルート (./) に移動するべきかを示すためです。

/ はルートルートに移動し、ルートルートが構成されているレイヤーから検索することを意味します。

<a [routerLink]="['/']">ホーム</a>

3. <router-outlet> の下のコンポーネントコンテンツを表示する

4. routerLinkパラメータは文字列ではなく配列です

ルーティング中にパラメータを渡すことができるためです。

4. コード内のRouterオブジェクトをナビゲートする

テンプレートにボタンを追加する

<input type="button" value="製品の詳細" (click)="toProductDetails()">

コントローラー内を移動するには、router.navigate を使用します。

ナビゲートパラメータは、routerLink パラメータと同じように構成されます。

'@angular/core' から Component をインポートします。
'@angular/router' から Router をインポートします。

@成分（{
  セレクタ: 'app-root',
  テンプレート URL: './app.component.html',
  スタイル URL: ['./app.component.css']
})
クラスAppComponentをエクスポートします。
  コンストラクター(プライベートルーター:Router){
  }
  製品の詳細(){
    this.router.navigate(['/product']);
  }
}

ボタンをクリックすると、リンクをクリックするのと同じ効果が得られます。

5. 存在しないパスの設定

ページが存在しないことを示すコード 404 コンポーネントを生成します。

最初に一致したルートが優先されるため、** ワイルドカードルートは最後に配置する必要があります。

const ルート: ルート = [
  { パス: '', コンポーネント: HomeComponent }, // パスは空です { パス: 'product', コンポーネント: ProductComponent },
  { パス: '**'、コンポーネント: Code404Component }
];

6. リダイレクトルーティング

アドレスを別の指定されたコンポーネントにリダイレクトします

www.aaa.com => www.aaa.com/products

www.aaa.com/x => www.aaa.com/y ユーザーは x アドレスをブックマークしている可能性があります。

リダイレクトルーティングの使用

const ルート: ルート = [
  { path: '', redirectTo : 'home', pathMatch:'full' }, // パスが空です { path: 'home', component: HomeComponent },
  { パス: 'product'、コンポーネント: ProductComponent },
  { パス: '**'、コンポーネント: Code404Component }
];