Angular 上具有常量侧边栏和导航栏的路由器出口导航

Question

我对如何放置我的路由器插座有点困惑。我曾尝试研究类似的案例，但无济于事。这是场景我有一个仪表板组件，它在登录成功后加载。仪表板包含在 html 上声明的侧边栏、页脚和导航组件。现在，当我单击用户 link 以显示用户列表时，它会加载用户组件，但侧边栏、页脚和导航消失，我只剩下用户组件。我只是想要这样一种情况，当我在侧边栏中点击一个link，它只是改变了内容，而没有删除侧边栏、页脚和导航…… PS: 用户组件有自己的模块，然后我像往常一样将它导入到 appModule 中。

这是我目前的情况。

app.component.html

<router-outlet></router-outlet>

dashboard.component.html

<side-bar></side-bar>
<topnav-bar></topnav-bar>
<content></content>
<footer></footer>

sidebar.component.html

 <li>
            <a id="formsli" (click)="anchorClicked($event)"
              ><i class="fa fa-user"></i> User<span class="fa fa-chevron-down"></span
            ></a>
            <ul class="nav child_menu">          
              <li><a [routerLink]="['/user/list']">User List</a></li>
              <li><a [routerLink]="['/user/new']">New User</a></li>
            </ul>
 </li>

用户路由文件

const routes: Routes = [
    { path: 'user/list', component: UsersComponent },
    { path: 'user/new', component: UserComponent },
];

应用模块

export const AppRoutes2: Routes = [
  { path: '', component: LoginComponent},
  { path: 'content', component: ContentComponent },
  { path: 'dashboard', component: DashboardComponent },
];

imports: [
      BrowserModule,
      RouterModule.forRoot(AppRoutes2, {useHash: false}),
      HttpClientModule,
      UsersModule,
   ],

如果我单击用户列表 link，侧边栏、导航栏和页脚就会消失。我希望它保留下来，只是更改内容区域。

拜托，我做错了什么或做错了什么？？

Answer 1

App.component.html

     //use the ngIf directive to either create or destroy the div with       static content (this is determined from the app.component.ta
      <div class='user-nav' *ngIf="isLoggedIn">
          <side-bar></side-bar>
          <top-navbar></top-navbar>
       </div>
     //anything that is routed will show up here
       <router-outlet></router-outlet>
    //if you want the footer to only be available after logging in add it here too
       <footer></footer>

Angular 上具有常量侧边栏和导航栏的路由器出口导航

Router-Outlet Navigation With Constant Sidebar and NavBar on Angular

angular

angular-ui-router