即使以角度导航后也显示多个组件

发布于 2025-01-13 19:27:08 字数 1365 浏览 1 评论 0原文

我正在尝试创建一个示例应用程序，例如登录并导航到另一个模块组件。我创建了 3 个模块，名称为 Loginmodule、Adminmodule、Usermodule。在登录模块组件中，我设计了两个具有不同导航的按钮。单击第一个按钮时，我将导航添加到用户模块主页组件和在第二个按钮上单击导航到管理模块的组件。

尽管我能够导航，但我仍然在页面顶部看到登录组件。目前我的路由器出口放置在登录组件 html 文件中。我需要更换到某个地方吗？

Loginuser.component.html：

<p>login works!</p>
<button [routerLink]="['user','userhomepage']">User</button>
<button  [routerLink]="['admin','adminhomepage']">Admin</button>

<router-outlet></router-outlet>

App.routing.module.ts：

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

const routes: Routes = [
  {path:"admin/adminhomepage", loadChildren:() => import("./admin/admin.module").then(m => m.AdminModule)},
  {path:"user/userhomepage", loadChildren:() => import("./user/user.module").then(m => m.UserModule)},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  //exports: [RouterModule]
})
export class AppRoutingModule { 
  constructor(){console.log("App-Routing");}
}

问题：

原文

I'm trying to create a sample app like Login and navigating to another modules component. I had created 3 modules names Loginmodule, Adminmodule, Usermodule. In login module component, I designed 2 buttons with different navigations. On first button click I added navigation to User module home component & on second button click navigation to admin module's component.

Even though I'm able to navigate, But still I'm seeing the login component on top of the page.Currently my router-outlet was placed in login component html file. Do I needs to replace to somewhere ?

Loginuser.component.html:

<p>login works!</p>
<button [routerLink]="['user','userhomepage']">User</button>
<button  [routerLink]="['admin','adminhomepage']">Admin</button>

<router-outlet></router-outlet>

App.routing.module.ts :

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

const routes: Routes = [
  {path:"admin/adminhomepage", loadChildren:() => import("./admin/admin.module").then(m => m.AdminModule)},
  {path:"user/userhomepage", loadChildren:() => import("./user/user.module").then(m => m.UserModule)},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  //exports: [RouterModule]
})
export class AppRoutingModule { 
  constructor(){console.log("App-Routing");}
}