Question

我正在尝试在包含子路径的应用程序中进行一些角度路由，而我似乎遇到了一个问题。

我设置了路线：

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

我的app.component内部<router-outlet></router-outlet>

因此，当应用程序加载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按钮时，我希望将SettingsComponent HTML替换为DocumentComponent。

HTML似乎保持不变，而DocumentComponent HTML将添加到我不希望发生的地方。

Answer 1

这应该有效：

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

路由器插座和HTML问题

1 个答案: