我的 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
应该在其中加载新组件的链接,我希望仅在蓝色边框区域中加载该新组件。