Angular 6-ルーティング

ルーティングとは、基本的にページ間を移動することを意味します。新しいページへのリンクを含む多くのサイトを見てきました。これはルーティングを使用して実現できます。ここで参照しているページは、コンポーネントの形式になります。コンポーネントの作成方法はすでに説明しました。コンポーネントを作成して、ルーティングを使用する方法を見てみましょう。

メインの親コンポーネント app.module.ts では、次に示すようにルーターモジュールを含める必要があります-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

「@ angular/router」から\ {RouterModule}をインポートします

ここでは、RouterModuleはangular/routerからインポートされます。モジュールは以下に示すようにインポートに含まれています-

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModuleは forRoot を参照します。これは入力を配列として受け取り、その配列にはパスとコンポーネントのオブジェクトが含まれます。パスはルーターの名前、コンポーネントはクラスの名前、つまり作成されたコンポーネントです。

コンポーネント作成ファイルを見てみましょう-

New-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.componentl',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

強調表示されたクラスは、メインモジュールのインポートで言及されています。

新しいcmp.componentl

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

ここで、必要なときに表示される、またはメインモジュールからクリックされるHTMLファイルの上記のコンテンツが必要です。このため、 app.componentl にルーターの詳細を追加する必要があります。

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br/>
<br/>
<br/>
<a routerLink = "new-cmp">New component</a>
<br/>
<br/>
<router-outlet></router-outlet>

上記のコードでは、アンカーリンクタグを作成し、routerLinkに "new-cmp" を指定しています。これは、 app.module.ts でパスと呼ばれます。

ユーザーが[新しいコンポーネント]をクリックすると、ページにコンテンツが表示されます。このために、次のタグが必要です- <router-outlet> </router-outlet> 。

上記のタグにより、ユーザーが*新しいコンポーネント*をクリックすると、 new-cmp.componentl のコンテンツがページに表示されます。

出力がブラウザにどのように表示されるかを見てみましょう。

Custome Pipe-1

ユーザーが[新しいコンポーネント]をクリックすると、ブラウザーに次のように表示されます。

Custome Pipe-2

URLには http：//localhost：4200/new-cmp が含まれています。ここで、new-cmpは、 app.module.ts および app.componentl のルーターリンクで指定されたパスである元のURLに追加されます。

ユーザーが[新しいコンポーネント]をクリックしても、ページは更新されず、コンテンツは再読み込みなしでユーザーに表示されます。クリックすると、サイトコードの特定の部分のみがリロードされます。この機能は、ページに重いコンテンツがあり、ユーザーの操作に基づいてロードする必要がある場合に役立ちます。この機能は、ページがリロードされないため、優れたユーザーエクスペリエンスも提供します。

Angular6-routing

Angular 6-ルーティング

「@ angular/router」から\ {RouterModule}をインポートします

New-cmp.component.ts

新しいcmp.componentl

目次