Angular7-ルーティング

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

プロジェクトのセットアップ中に、ルーティングモジュールが既に含まれており、以下に示すようにapp.module.tsでも同じことが可能です-

*app.module.ts*

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
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,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

*AppRoutingModule* は上記のように追加され、imports配列に含まれます。

*app-routing.module* のファイルの詳細を以下に示します-

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

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

ここで、プロジェクトのセットアップ中にルーティングが追加されると、デフォルトでこのファイルが生成されることに注意する必要があります。追加しない場合は、上記のファイルを手動で追加する必要があります。

したがって、上記のファイルでは、@ angular/routerからRoutesとRouterModuleをインポートしました。

タイプRoutesであるconst routes が定義されています。これは、プロジェクトで必要なすべてのルートを保持する配列です。

@NgModuleに示すように、constルートはRouterModuleに与えられます。ルーティングの詳細をユーザーに表示するには、ビューを表示する場所に<router-outlet>ディレクティブを追加する必要があります。

以下に示すように、app.componentlに同じものが追加されます

<h1>Angular 7 Routing Demo</h1>
<router-outlet></router-outlet>

ここで、 Home および Contact と呼ばれる2つのコンポーネントを作成し、ルーティングを使用してそれらの間を移動します。

コンポーネントホーム

最初に、ホームについて説明します。以下は、コンポーネントホームの構文です-

ng g component home

C:\projectA7\angular7-app>ng g component home CREATE
src/app/home/home.componentl (23 bytes) CREATE
src/app/home/home.component.spec.ts (614 bytes) CREATE
src/app/home/home.component.ts (261 bytes) CREATE
src/app/home/home.component.css (0 bytes) UPDATE
src/app/app.module.ts (692 bytes)

コンポーネントお問い合わせ

コンポーネントの連絡先の構文は次のとおりです-

ng g component contactus

C:\projectA7\angular7-app>ng g component contactus
CREATE src/app/contactus/contactus.componentl (28 bytes)
CREATE src/app/contactus/contactus.component.spec.ts (649 bytes)
CREATE src/app/contactus/contactus.component.ts (281 bytes)
CREATE src/app/contactus/contactus.component.css (0 bytes)
UPDATE src/app/app.module.ts (786 bytes)

自宅でコンポーネントを作成し終わったら、お問い合わせください。以下はapp.module.tsのコンポーネントの詳細です-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      HomeComponent,
      ContactusComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

次に、以下に示すように、ルートの詳細を app-routing.module .tsに追加します-

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent}
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { }

routes配列には、コンポーネントの詳細とパスおよびコンポーネントが含まれます。上記のように、必要なコンポーネントがインポートされます。

ここで、ルーティングに必要なコンポーネントがapp.module.tsおよびapp-routing.module.tsにインポートされていることに注意する必要があります。 1つの場所、つまりapp-routing.module.tsにインポートします。

そのため、ルーティングに使用されるコンポーネントの配列を作成し、app-routing.module.tsで配列をエクスポートし、再びapp.module.tsでインポートします。したがって、app-routing.module.tsのルーティングに使用されるすべてのコンポーネントがあります。

これは我々がそれをやった方法です app-routing.module.ts -

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [
   {path:"home", component:HomeComponent},
   {path:"contactus", component:ContactusComponent}
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule { } export const
RoutingComponent = [HomeComponent,ContactusComponent];

コンポーネントの配列、つまりRoutingComponentは、次のようにapp.module.tsにインポートされます-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
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,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

これで、ルートの定義は完了です。ユーザーに同じものを表示する必要があるので、app.componentlにHomeとContact Usの2つのボタンを追加し、それぞれのボタンをクリックすると、追加した<router-outlet>ディレクティブ内にコンポーネントビューが表示されますadd.componentl内。

app.componentl内にボタンを作成し、作成されたルートへのパスを指定します。

*app.componentl*

<h1>Angular 7 Routing Demo</h1>
<nav>
   <a routerLink = "/home">Home</a>
   <a routerLink = "/contactus">Contact Us </a>
</nav>
<router-outlet></router-outlet>

lでは、アンカーリンクHomeとContact usを追加し、routerLinkを使用してapp-routing.module.tsで作成したルートへのパスを指定しています。

ブラウザで同じことをテストしてみましょう-

ルーティングデモ

これがブラウザでの取得方法です。リンクをきれいに表示するために、スタイルを追加してみましょう。

app.component.cssに次のCSSを追加しました-

a:link, a:visited {
   background-color: #848686;
   color: white;
   padding: 10px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
}
a:hover, a:active {
   background-color: #BD9696;
}

これは、ブラウザ内のリンクの表示です-

リンクを表示

以下に示すように、ホームのコンポーネントの詳細を表示するには、ホームリンクをクリックしてください-

ホームリンク

以下に示すように、コンポーネントの詳細を表示するには、お問い合わせをクリックしてください-

お問い合わせ

リンクをクリックすると、アドレスバーのページURLも変化します。上記のスクリーンショットに示すように、ページの最後にパスの詳細が追加されます。

Angular7-routing

Angular7-ルーティング

コンポーネントホーム

コンポーネントお問い合わせ