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

【问题标题】：Angular 2-7: What's the best approach of hiding/showing components on same URL?Angular 2-7：在同一 URL 上隐藏/显示组件的最佳方法是什么？
【发布时间】：2019-09-26 20:16:36
【问题描述】：

由于某些平台限制，我无法使用路由 - 不同的 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：使用路由参数？

【问题讨论】：

看看stackoverflow.com/questions/37054731/…

标签： angular typescript angular7 angular-routing angular7-router

【解决方案1】：

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

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

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

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

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

这将是一个更好的解决方案，然后寻找一种更简洁的方式来隐藏和显示一个页面中的组件。

【讨论】：