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>吗？

在角度5中的路由：在页面的一部分中加载组件

1 个答案: