具有多个视图的路线

Question

我正在尝试在我的项目中做，即我页面的单个页面 [routerLink] 个能够显示所选组件的信息。我的意图是：

登录[X]
界面 [X] 的用户/管理员
浏览管理员组件[?]

在第三点，这是我留空的地方，因为当用户登录时访问管理员角色，它包含一个侧边栏，其中有不同的选项可供选择和在一个部分中显示每个选定组件的信息。所以，问题是它是一个管理员组件（父亲），必须加载一个子组件，我不知道该怎么做？

仪表板示例

这是我的代码的一部分：

app.module.ts

const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  },
  {
    path:'login',
    component: LoginComponent
  },
  {
    path:'administrator',
    component: AdministratorComponent,
    canActivate: [AuthGuard]
  },
  { path: 'information', component: InformationComponent },
  { path: 'operator', component: OperatorComponent },
  { path: 'configuration-bill', component: ConfigurationBillComponent },
  { path: 'error', component: ErrorComponent },
  { path: 'home', component: HomeComponent },
  {
    path: '**',
    redirectTo: "/error"
  }
];

管理员组件

<div class="form-row">
  <div class="col-md-12">
    <!-- this section always has to be there TOP side-->
    <app-barra-nav></app-barra-nav>
  </div>
  <div class="col-md-12">
  <div class="col-md-12">
    <div class="container-fluid" >
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">          
          <div class="list-group">
            <button type="button" class="list-group-item list-group-item-action text-center text-primary h6">
              SETTINGS <i class="fas fa-cog"></i>
            </button>
            <div class="collapse text-left">
              <button type="button" class="list-group-item list-group-item-action h6" [routerLink]="['/configuration-bill']" routerLinkActive="active">
                <i class="far fa-newspaper"></i>
                Set up your bill
              </button>
              <button type="button" class="list-group-item list-group-item-action h6" [routerLink]="['/print-label']" routerLinkActive="active">
                <i class="fas fa-print"></i>
                ¡Print Labels!
              </button>
              <a class="list-group-item list-group-item-action h6" [routerLink]="['/information']" routerLinkActive="active">
                <i class="fas fa-question-circle"></i>
                Information
              </a>
            </div>
          </div>
        </nav>
        <div class="col-md-10">
         <!-- here should be charge the child components -->
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

谢谢，我希望对上述内容有所了解

Answer 1

看来您需要一个子路由器插座：

    <div class="col-md-10">
     <!-- here should be charge the child components -->
     <router-outlet></router-outlet>
    </div>

然后任何进入路由器出口的路由都需要是管理组件的子组件。

const routes: Routes = [
  {
    path:'',
    component: HomeComponent
  },
  {
    path:'login',
    component: LoginComponent
  },
  {
    path:'administrator',
    component: AdministratorComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'information', component: InformationComponent },
      { path: 'operator', component: OperatorComponent },
      { path: 'configuration-bill', component: ConfigurationBillComponent },
    ]
  },
  { path: 'error', component: ErrorComponent },
  { path: 'home', component: HomeComponent },
  {
    path: '**',
    redirectTo: "/error"
  }
];

注意：我将您的代码复制并粘贴到此处并进行了手工编辑。我没有语法检查这个。使用上面的内容大致了解您需要的代码。

我在这里有一个演示子路由（和其他一些路由技术）的 YouTube 视频：https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=5s

您可以在此处找到示例代码：

https://github.com/DeborahK/MovieHunter-routing

这里：

https://github.com/DeborahK/Angular-Routing

具有多个视图的路线

Routes with multiple views

angular

angular6