Angularルーターアウトレットについて

Angular は、効率的な Web アプリケーションの開発に役立つ多くの強力なツールを提供する最新のフロントエンドフレームワークです。最も一般的に使用される機能の 1 つはルーティングシステムです。これにより、異なる URL 間を移動し、異なるコンポーネントを読み込むことができます。代わりに<router-outlet>、これは Angular のルーティングシステムに関連するディレクティブの 1 つです。

とは？

<router-outlet>は、ルーターによってロードされたコンポーネントをテンプレートに表示するための Angular 組み込みディレクティブです。通常、これはメインテンプレート (app.component.html) に配置され、次のプロパティがあります。

リンクをクリックするか、プログラムによるナビゲーションを使用すると、現在の URL に基づいて対応するコンポーネントが動的に挿入されます。
他のコンポーネント内にネストして、より複雑なレイアウトを作成できます。
複数のコンポーネントを同時に表示するために、属性nameを使用して複数の名前付きコンポーネントを定義できます。<router-outlet>

これをアプリケーションで使用する方法を示す基本的な例を次に示します<router-outlet>。

<!-- app.component.html -->
<header>
  <nav>
    <a routerLink="/home">Home</a>
    <a routerLink="/about">About</a>
  </nav>
</header>
<main>
  <router-outlet></router-outlet>
</main>
<footer>
  <!-- footer content here -->
</footer>

<router-outlet>クリックHomeまたはリンクするAboutと、対応するコンポーネントが動的に挿入されることに注意してください。

ルートを定義するにはどうすればよいですか?

ルーティングシステムを使用するには、まずいくつかのルートを定義する必要があります。Angular では、ルートは URL とコンポーネントで構成されます。たとえば、次のようなルートを定義できます。

const routes: Routes = [
  {
    
     path: 'home', component: HomeComponent },
  {
    
     path: 'about', component: AboutComponent }
];

ここでは 2 つのルートを定義します。1 つは/homeこの URL に対応するコンポーネントHomeComponent、もう 1 つは/aboutこの URL に対応するコンポーネントですAboutComponent。

また、ルーティングモジュール (RouterModule) をモジュールにインポートし、imports 配列に追加する必要があります。

import {
    
     RouterModule, Routes } from '@angular/router';

@NgModule({
    
    
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
    
     }

このうち、forRoot()このメソッドはルートルートを設定し、RouterModule ディレクティブを含む NgModule を返すために使用されます。サブモジュールでルートを定義する場合はforChild()メソッドを使用する必要があります。

コード内を移動するにはどうすればよいですか?

ルーティングナビゲーションを実現するには、リンクを使用する方法とプログラムによるナビゲーションの 2 つの方法があります。

リンクナビゲーション

テンプレートでは、routerLinkディレクティブを使用してリンクにナビゲーション機能を追加できます。例えば：

<!-- app.component.html -->
<a routerLink="/home">Home</a>
<a routerLink="/about">About</a>

プログラムによるナビゲーション

コード内を移動する必要がある場合は、Angular の Router サービスを使用できます。

import {
    
     Component } from '@angular/core';
import {
    
     Router } from '@angular/router';

@Component({
    
    
  template: `
    <button (click)="goHome()">Go home</button>
    <button (click)="goAbout()">Go about</button>
  `
})
export class MyComponent {
    
    
  constructor(private router: Router) {
    
    }

  goHome() {
    
    
    this.router.navigate(['/home']);
  }

  goAbout() {
    
    
    this.router.navigate(['/about']);
  }
}

ここでは 2 つのメソッドを定義しgoHome()、メソッドgoAbout()を呼び出すことでrouter.navigate()ルーティングナビゲーションを実装します。

要約する

<router-outlet>は、Angular でルーティングシステムをより簡単かつ効率的に使用できるようにする非常に便利なディレクティブです。ルーティングとナビゲーションを理解すると、より複雑で効率的な Web アプリケーションを作成できます。