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

具有多个视图的路线

1 个答案: