Angular 2-7：hiding/showing 组件在相同 URL 上的最佳方法是什么？

Question

Due to some platform restrictions, there I can't use Routing - different urls to navigate to different components.

In other words, there is only http://localhost.com/default

NO http://localhost.com/user

NO http://localhost.com/items

I manage to put all the child components in the AppComponent as a parent and use variables to indicate which child component to hide and show by ui actions in order to manipulate the layout.

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

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

As there are massive components are put together, the code in ts file is messy.

I am wondering if there is any better approach of NOT using booleans and ngIf to show or hide child components?

RESOLUTION 1: Does Routing have an advanced feature to navigate to different components on same url?

RESULUTION 2: Use Routing params?

Answer 1

RESOLUTION 1: Does Routing have an advanced feature to navigate to different components on same url?

是的，您可以改用哈希定位策略。这样您的页面仅由 angular.

路由

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

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

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

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

Angular 2-7：hiding/showing 组件在相同 URL 上的最佳方法是什么？

Angular 2-7: What's the best approach of hiding/showing components on same URL?

angular

typescript

angular7

angular-routing

angular7-router