角度2-7：在同一URL上隐藏/显示组件的最佳方法是什么？

Question

由于某些平台限制，我无法使用“路由”-不同的URL导航到不同的组件。

换句话说，只有http://localhost.com/default

否http://localhost.com/user

否http://localhost.com/items

我设法将所有子组件作为父组件放置在AppComponent中，并使用变量来指示要通过ui操作隐藏和显示哪个子组件，以便操纵布局。

<app-user-panel
  [hidden]="!showUser"
  (closed)="onUserPanelClosed($event)"
></app-user-panel>

<app-items-panel
  [hidden]="!showItems"
  (closed)="onItemsPanelClosed($event)"
></app-items-panel>

由于存在大量组件，因此ts文件中的代码很混乱。

我想知道是否有不使用booleans和ngIf来显示或隐藏子组件的更好方法？

解决方案1：路由是否具有高级功能以导航到同一URL上的不同组件？

结果2：使用路由参数？

Answer 1

解决方案1：路由是否具有高级功能以导航到同一URL上的不同组件？

是的，您可以改用哈希定位策略。 这样，您的页面仅按角度路由。

示例： http : //localhost.com/#/user您的服务器不会尝试返回用户页面，而是angular将对其进行评估并呈现用户屏幕。

您唯一需要做的就是用true初始化useHash

@NgModule({
  imports: [ RouterModule.forRoot(routes, {useHash: true})],
  exports: [ RouterModule ]
})

这将是一个更好的解决方案，然后研究一种更干净的方式来隐藏和显示一页中的组件。