Angular 路由器出口和html问题

我试图在包含子路由的应用程序中执行一些角度路由，我似乎遇到了一个问题

我已设置了我的路线：

const appRoutes: Routes = [
  { path: '', redirectTo: 'settings', pathMatch: 'full' },
  { path: 'settings', component: SettingsComponent, children: [
    { path: 'document', component: DocumentComponent }
  ]}
];

在我的

应用程序组件内部

我有

因此，当应用程序加载SettingsComponent时，它会成功加载包含以下HTML的组件：

  <ul>
    <li>
      <button routerLink="./document">Document Manager</button>
    </li>
    <li>
      <button>Pack Manager</button>
    </li>
    <li>
      <button>Email Manager</button>
    </li>
    <li>
      <button>SMS Manager</button>
    </li>
  </ul>

文档管理员


包管理器


电子邮件管理器


短信管理器

问题是，当我单击Document Manager按钮时，我希望设置组件HTML被替换为DocumentComponent

HTML似乎保留了下来，DocumentComponent HTML添加到下面，我不希望发生这种情况。

这应该可以：

const appRoutes: Routes = [
  { path: '', redirectTo: 'settings', pathMatch: 'full' },
  { path: 'settings', component: SettingsComponent},
  { path: 'settings/document', component: DocumentComponent }
];