bugfix> angular > 投稿

子ルートアウトレットに問題があります。 プロファイル、スタッフなどとしてダッシュボードモジュールと子モジュールがあります。ただし、プロファイルコンポーネントは、リンクlocalhost:4200/dashboard/profileだけでなく、localhost:4200/profileでもロードされます。子コンポーネントがルートルートコンセントにロードされるようです

ログインのみの例です(ただし、同じプロジェクトと構成も同じです)。idr-frontend.staging.myappworx.com/ auth/loginおよびidr-frontend.staging.myappworx.com/loginとして機能します。

1. App.module

import {routing} from './app.routing';
    import {DashboardModule} from './dashboard/dashboard.module';
    import {AppComponent} from './app.component';
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
           routing,
           DashboardModule
        ]
    })
    export class AppModule {}

2. App.routing.ts

import {Routes, RouterModule} from '@angular/router';
import {DashboardComponent} from './dashboard/dashboard.component';
import {LoginRedirect} from './auth/services/login-redirect.service';
import {EnsureAuthenticated} from './auth/services/ensure-authenticated.service';
const appRoutes: Routes = [         
   {
        path: 'dashboard',
        component: DashboardComponent,
        canActivate: [EnsureAuthenticated],
        loadChildren: './dashboard/dashboard.module#DashboardModule',
    },
    {
        path: '**',
        redirectTo: 'dashboard',
        canActivate: [EnsureAuthenticated]
    }
];
export const routing = RouterModule.forRoot(appRoutes);

3. app.component.html

<router-outlet></router-outlet>

4. dashboard.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {DashboardComponent} from './dashboard.component';
import {dashboardRouting} from './dashboard.routing';
import {ProfileModule} from '../profile/profile.module';
import { StaffModule } from '../staff/staff.module';
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        dashboardRouting,
        ProfileModule,
        StaffModule
    ],
    declarations: [
        DashboardComponent
    ],
    providers: [            
    ],
    exports: []
})
export class DashboardModule {}

5. dashboard.routing.ts

import {Routes, RouterModule} from '@angular/router';
import {ProfileComponent} from '../profile/profile.component';
import {EnsureAuthenticated} from '../auth/services/ensure-authenticated.service';
import { StaffComponent } from '../staff/staff.component';
const dashboardRoutes: Routes = [
    {
        path: 'profile',
        component: ProfileComponent,
        canActivate: [EnsureAuthenticated]
    },
    {
        path: 'staff',
        component: StaffComponent,
        canActivate: [EnsureAuthenticated]
    }
];
export const dashboardRouting = RouterModule.forChild(dashboardRoutes);

6. dashboard.component.html

  <div class="contentWrap">
        <header class="header">
        <div class="currentTime">
            {{currentTime}}
        </div>
        <div class="status"></div>
    </header>
    <router-outlet></router-outlet>
</div>

回答 2 件
  • 遅延ロードされるため、app.module.tsのインポートからDashboardModuleを削除してください。/profileも機能しているのかもしれません

    imports: [
           routing,
           DashboardModule // delete this
        ]
    
    

  • localhost:4200/profile の理由  また、これはあなたの子コンポーネントをロードします:

    { path: '**', redirectTo: 'dashboard', canActivate: [EnsureAuthenticated] }
    
    

    ** wild card  構成の前半で定義されたルートのいずれにも一致しないパスをリダイレクトするために使用されます。また、ご覧のとおり、 profile を定義していません  パス、したがって、リダイレクトされます/ダッシュボード

    **へのリダイレクトに便利です404ページ

    詳細については公式ドキュメントをご覧ください

あなたの答え