質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

1回答

2316閲覧

routerLinkで画面遷移をさせたい

jones

総合スコア36

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

0クリップ

投稿2021/01/04 11:57

やろうとしていること

ログイン機能で画面遷移だけをさせようとしています。
router-outletをHTMLに記述しているのでリンクで画面遷移させたいが、遷移先のコンポーネントが下に積み上がってく状況です。

状況

現状
component1
↓リンクをクリック
component1
component2

理想
component1
↓リンクをクリック
component2

router-outletは仮想のコンポーネントを表示させると聞き何もないコンポーネントを用意してやれば画面が切り替わると教わりましたが、実際やってみると自分の場合はうまくいかない状況です。

ソースコード

app-routing-module.ts

ts

1import { NgModule } from '@angular/core'; 2import { Routes, RouterModule } from '@angular/router'; 3import { from } from 'rxjs'; 4import { SessionComponent } from './session/session.component'; 5import { MyPageComponent } from './my-page/my-page.component'; 6import { UserCreateComponent } from './user-create/user-create.component'; 7import { UserCreateConfirmComponent } from './user-create-confirm/user-create-confirm.component'; 8import { UserCreateDoneComponent } from './user-create-done/user-create-done.component'; 9import { UserCreateRoutingModule } from './user-create/user-create-routing.module'; 10import { MyPageRoutingModule } from './my-page/my-page-routing.module'; 11 12const routes: Routes = [ 13 { 14 path: "", 15 component: SessionComponent, 16 children: [ 17 { path: 'user-create', 18 component: UserCreateComponent, 19 children:[ 20 { path: 'user-create-confirm', component: UserCreateConfirmComponent}, 21 { path: 'user-create-done', component: UserCreateDoneComponent}, 22 ] 23 } 24 ] 25 }, 26]; 27 28@NgModule({ 29 imports: [ 30 RouterModule.forRoot(routes), 31 MyPageRoutingModule, 32 UserCreateRoutingModule 33 34 ], 35 exports: [RouterModule] 36}) 37export class AppRoutingModule { } 38

my-page-routing-module.ts

ts

1import { NgModule } from '@angular/core'; 2import { Routes, RouterModule } from '@angular/router'; 3import { MyPageComponent } from '../my-page/my-page.component'; 4import { UserEditComponent } from '../user-edit/user-edit.component'; 5import { UserEditConfirmComponent } from '../user-edit-confirm/user-edit-confirm.component'; 6import { UserEditDoneComponent } from '../user-edit-done/user-edit-done.component'; 7import { UserCreateRoutingModule } from '../user-create/user-create-routing.module'; 8import { IndexComponent } from '../index/index.component'; 9 10 11const routes: Routes = [ 12 { 13 path:'my-page', 14 component: MyPageComponent, 15 children:[ 16 { path: 'user-edit', 17 component: UserEditComponent, 18 children:[ 19 { path: 'user-edit-confirm', component: UserEditConfirmComponent }, 20 { path: 'user-edit-done', component: UserEditDoneComponent } 21 ] 22 } 23 ] 24 }, 25 { path: 'my-page', component:IndexComponent}, 26]; 27 28@NgModule({ 29 imports: [ 30 RouterModule.forChild(routes), 31 UserCreateRoutingModule 32 ], 33 exports: [RouterModule] 34}) 35export class MyPageRoutingModule { } 36

user-create-routing.module.ts

ts

1import { NgModule } from '@angular/core'; 2import { Routes, RouterModule } from '@angular/router'; 3import { UserCreateComponent } from '../user-create/user-create.component'; 4import { UserCreateConfirmComponent } from '../user-create-confirm/user-create-confirm.component'; 5import { UserCreateDoneComponent } from '../user-create-done/user-create-done.component'; 6import { IndexComponent } from '../index/index.component'; 7 8 9const routes: Routes = [ 10 { 11 path: 'user-create', 12 component: UserCreateComponent, 13 children:[ 14 { path: 'user-create', component: IndexComponent}, 15 { path: 'user-create-confirm', component: UserCreateConfirmComponent}, 16 { path: 'user-create-done', component: UserCreateDoneComponent}, 17 ] 18 }, 19]; 20 21@NgModule({ 22 imports: [RouterModule.forChild(routes)], 23 exports: [RouterModule] 24}) 25export class UserCreateRoutingModule { } 26

app-routingモジュールとmy-page-routingモジュールとuser-createモジュールに分けているのは
この後LazyLoardingにも取り掛かろうと考えているからです。

やってみたこと

my-page-routingモジュールの

children:[ { path: 'user-edit-confirm', component: UserEditConfirmComponent }, { path: 'user-edit-done', component: UserEditDoneComponent } ]

の部分ではコンポーネントが切り替わってくれるのでこのようにすれば切り替わってくれるのかと思い
空のコンポーネントを入れてみると、rootの時点で画面が真っ白に(何も表示されていない)なってしますという状況です。

環境

Angular CLI 11.0.5
Node.js 14.15.3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

component2の上にからのcomponentを作ってあげると質問のような画面遷移になりました。
htmlの
<router-outlet><router-outlet>はコンポーネントの下にリンク先のコンポーネントをくっつけるというものみたいなので、そこにからのコンポーネントをくっつけるという意味合いになります。

投稿2021/02/05 06:09

jones

総合スコア36

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問