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文件中的代码很乱。

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

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

结果2：使用路由参数？

Answer 1

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

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

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

您唯一需要做的就是将useHash设置为true

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

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

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

1 个答案: