休日で空いた時間の暇つぶしを探せるアプリを公開しています。
angularのバージョン:14.0.0
①コンポーネントを作成する
sandbox % ng g component userRegister --module app.modulesrc/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のパスがあっていないなどを確認してみましょう。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント