Angular4-routing
Angular 4-ルーティング
ルーティングとは、基本的にページ間を移動することを意味します。 新しいページへのリンクを含む多くのサイトを見てきました。 これはルーティングを使用して実現できます。 ここで参照しているページは、コンポーネントの形式になります。 コンポーネントの作成方法はすでに説明しました。 コンポーネントを作成して、ルーティングを使用する方法を見てみましょう。
メインの親コンポーネント 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 のコンテンツがページに表示されます。
出力がブラウザにどのように表示されるかを見てみましょう。
ユーザーが[新しいコンポーネント]をクリックすると、ブラウザーに次のように表示されます。
URLには http://localhost:4200/new-cmp が含まれています。 ここで、new-cmpは、 app.module.ts および app.componentl のルーターリンクで指定されたパスである元のURLに追加されます。
ユーザーが[新しいコンポーネント]をクリックしても、ページは更新されず、コンテンツは再読み込みなしでユーザーに表示されます。 クリックすると、サイトコードの特定の部分のみがリロードされます。 この機能は、ページに重いコンテンツがあり、ユーザーの操作に基づいてロードする必要がある場合に役立ちます。 この機能は、ページがリロードされないため、優れたユーザーエクスペリエンスも提供します。