1

我的 app-routing.module.ts 内容看起来像这样。

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' }
  , { path: 'navbar/:moduleId', component: NavMenuComponent }
  , { path: 'entitylist/:menuItemId', component: EntityListComponent, outlet:"content"}
  , { path: 'profile/:profileId', component: ProfileMasterComponent}
];

我有一个 header.html。加载标题链接。

**header.html**
<div class="collapse navbar-collapse" id="navbarCollapse">
  <ul class="navbar-nav">
    <li *ngFor="let module of modules">
      <a class="nav-link dropdown-toggle" [routerLink]="['/navbar',module.id]" (click)="moduleId = module.Id">
        {{module.name}}
      </a>
    </li>
  </ul>
</div>


<div class="container-fluid content">
<router-outlet></router-outlet>
</div>


**nav-menu.html**
<div class="row">
  <div class="col-sm-2">
        <a [routerLink]="['',{outlets:{content:['entitylist',menuItem.id]}}]">{{menuItem.name}}</a>
  </div>
  <div class="col-sm-10">
    <router-outlet name="content"></router-outlet>
  </div>
</div>

问题 1

单击任何标题链接时,它会正确加载 nav-menu.html(侧栏)。但是,单击 nav-menu.html 中的任何链接时,我希望将entity-list component其加载到与侧栏相邻的区域(带有蓝色边框)中。然而,这不会发生。控制台中也没有错误。

问题2

将内容加载到蓝色边框区域后,我希望仅将所有内容加载到该区域中。例如,我有entity-list component应该在其中加载新组件的链接,我希望仅在蓝色边框区域中加载该新组件。

在此处输入图像描述

4

1 回答 1

1

我认为这是路线设计的问题。

检查这个 stackblitz 并希望你能找到一些想法:

https://stackblitz.com/edit/angular-router-outlets-sic3d3?file=app%2Fapp.routing.ts

于 2021-10-16T13:31:42.780 回答