【市場価値がわかる】エンジニア転職におすすめなサイト

【Angular】画面遷移のやり方をシンプルに解説

angularのバージョン:14.0.0

①コンポーネントを作成する

sandbox % ng g component userRegister --module app.module

src/app/user-registerが作成される。

また、app.module.tsに–module app.moduleとつけたことで、自動的にuserRegisterComponentがimportされます。

②app.module.tsに画面遷移するためのパスを設定する。

・RouterModule, Routesをimportしていること。
・作成したコンポーネントがimportされていること。(UserRegisterComponent)
・constに画面パスと対応するコンポーネントをセットすること。
・importsで、画面パスとコンポーネントを読み込むこと(RouterModule.forRoot(ROUTE_TABLE))

path: ‘任意のパス’と設定できます。

なので、/userRegisterとしたければ、path: ‘userRegister’にすればいいし、/user-registerにしたければ、path: ‘user-register’にすればいいし、/user/registerにしたければ、path: ‘user/register’にすれば良いです。

// モジュール
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';

// コンポーネント
import { AppComponent } from './app.component';
import { UserRegisterComponent } from './user-register/user-register.component';

const ROUTE_TABLE: Routes = [
  { path: 'userRegister', component: UserRegisterComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    UserRegisterComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(ROUTE_TABLE),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

③htmlにrouterLinkで画面遷移できるようにする

router-outletを記載することで、画面遷移するビューをここに表示してほしいと伝える役割があります。

<a routerLink="/userRegister">ユーザー登録画面へ</a>
<router-outlet></router-outlet>

これで、画面リンクのユーザー登録画面へをクリックすると、/userRegisterに遷移し、src/app/user-register/user-register.component.htmlの内容が表示されます。

もし、画面遷移しない場合は、app.module.tsのpath:’任意のパス’とapp.component.htmlにあるrouterLinkのパスがあっていないなどを確認してみましょう。

スキルを売り買いするならココナラ

オンライン動画学習ならUdemy

コメント

コメントする

CAPTCHA


Contents
閉じる