使用 Angular 多出口

Question

我的 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有鏈接，我希望該新組件僅在藍色邊框區域加載。

Answer 1

我認為這是路線設計的問題。

檢查這個 stackblitz 並希望你找到一些想法：

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