2

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

4

1 回答 1

3

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

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

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

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

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

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

于 2019-05-09T05:11:36.643 回答