routing in angular 5 : 在页面的一部分加载组件

Question

我有一个侧边栏组件，当用户单击页面的一部分中的一个选项加载组件时。

但是当我单击选项时，会在所有页面中加载新组件。

我该如何解决这个问题？

    <div>
<ul nz-menu [nzMode]="'inline'" style="width: 240px;" [nzTheme]="theme?'dark':'dark'">
  <li nz-submenu nzOpen>
    <span title><i class="anticon anticon-mail"></i>  Letter </span>
    <ul>
      <li nz-menu-group>
        <ul>
          <li nz-menu-item><a [routerLink]="['/Inbox']">Inbox &nbsp;&nbsp;<nz-badge [nzCount]="555"></nz-badge>
            </a></li>
          <li nz-menu-item><a [routerLink]="['/Drafts']">Drafts</a></li>
          <li nz-menu-item><a [routerLink]="['/NewLetter']">Write Letter</a></li>
          <li nz-menu-item><a [routerLink]="['/ListLetter']">List Letter</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>
<div class="container">
  <router-outlet></router-outlet>
</div>

路线：

    const routes: Routes = [
  {path: 'Inbox', component: InboxComponent},
  {path: 'Profile', component: ProfileComponent},
  {path: 'NewLetter', component: CreateLetterComponent},
  {path: 'Drafts', component: DraftsComponent},
  {path: 'ListLetter', component: ListLetterComponent},
  {path: '', redirectTo: 'Inbox' +
    '', pathMatch: 'full'}
];

图片：I need load component in part of page

Answer 1

看看官方tutorial。我认为您想在指定侧边栏的地方有一个 <nav> 标签。

此外 - 是您链接的 app.component.html 吗？您确定不是偶然指定了更多 <router-outlet> 吗？

routing in angular 5 : 在页面的一部分加载组件

routing in angular 5 : load component in part of page

angular

angular-ui-router

angular5