I have a small application where everyone logs in as a user1, but can be promoted to an admin. An admin can do everything a user1 can do plus an extra tools. So I setup admin features as a lazy loaded module but I still want to share the same nav bar as user1 but add extra buttons with links to the child components of admin module.

I tried studying the routing example project on the angular documentation but they use a separate nav bar for their admin module and other solutions I've seen don't use routerLink. They use router.navigate. And I'm having trouble understanding their relationship to each other enough to use their code interchangeably.

In summary, I'm having trouble implementing routerLink to route to a child component in a lazy loaded module using the same header/navigation component.

Any help please and thank you

app-routing.module.ts

const routes: Routes = [
  {
    path: '', redirectTo: '/home', pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'authenticate',
    component: AuthpageComponent,
    children: [
      {
        path: '', redirectTo: 'login', pathMatch: 'full'
      },
      {
        path: 'login', component: LoginComponent
      },
      {
        path: 'signup', component: SignupComponent
      }
    ]
  },
  {
    path: 'admin',
    loadChildren: () => import('./modules/admin/admin.module').then(m => m.AdminModule),
    canLoad: [AuthGuard],
    data: {
      role: Roles.admin
    }
  },
  {
    path: 'profile',
    component: ProfileComponent,
    canActivate: [AuthGuard]
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

header.component.html (header/navigation bar that I want both, the root and adminModule to use

<div id="Header">
  <nav id="navbar" >
    <a routerLink="/home" routerLinkActive="actives" >add logo here</a> 
    <a routerLink="/explore" routerLinkActive="active" >Explore</a>
    <a routerLink="/community" routerLinkActive="active" >Community</a>
    <a routerLink="/my-questions" routerLinkActive="active"  *ngIf="isLoggedIn">My Question</a>
    <a routerLink="/authenticate/login" routerLinkActive="active"  *ngIf="!isLoggedIn">Login</a>
    <a routerLink="/authenticate/login" routerLinkActive="active"  *ngIf="isLoggedIn">Logout</a>
    <a routerLink="/profile" routerLinkActive="active"  *ngIf="isLoggedIn"><img alt="profile" src="@assets/images/avatar.png" width="20"/></a>

      <div accessControl="ROLE_ADMIN" ngbDropdown >
      <button type="button"  id="dropdownBasic1" ngbDropdownToggle>ADMIN</button>
        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
          <button routerLink="admin/home" ngbDropdownItem>Home</button>
          <button routerLink="admin/create" ngbDropdownItem>Create Dashboard</button>
          <button ngbDropdownItem>View My Dashboard</button>
          <button ngbDropdownItem>Stats</button>
        </div>
      </div>
  </nav>
</div>

admin-routing.module.ts

const adminRoutes: Routes = [
 {
   path: '',
   component: RhomeComponent,
   canActivate: [AuthGuard],
   children: [
     {
       path: '',
       canActivateChild: [AuthGuard],
       children: [
         { path: 'home', component: RhomeComponent },
         { path: 'create', component: CreateDashboardPageComponent }
       ]
     }
   ]
 }

];

@NgModule({
  imports: [RouterModule.forChild(adminRoutes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

admin.module.ts

@NgModule({
  declarations: [
    CreateDashboardPageComponent,
    RhomeComponent
  ],
  imports: [
    CommonModule,
    AdminRoutingModule
  ]
})
export class AdminModule { }

rhome.component.ts (the component that shares the navigation)

<!-- this is where I want to add the shared navigation> <app-header></app-header> -->
<p>admin home</p>
<router-outlet></router-outlet>

CodePudding user response：

1. Create shared module.
2. Declare and export there your navbar component.
3. Use this component in other modules by importing the shared module into them.

Don't forget to pull the component declaration from the app.module.ts