Угловой 2-7: Как лучше всего скрывать / показывать компоненты на одном и том же URL?

Question

Из-за некоторых платформных ограничений там я не могу использовать маршрутизацию - разные URL для перехода к разным компонентам.

Другими словами, есть только http://localhost.com/default

НЕТ http://localhost.com/user

НЕТ http://localhost.com/items

Мне удается поместить все дочерние компоненты в AppComponent как родительские и использовать переменные, чтобы указать, какой дочерний компонент следует скрыть и показать действиями пользовательского интерфейса для управления макетом.

<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. Есть ли в Routing расширенная функция для перехода к различным компонентам по одному и тому же URL?

РЕЗУЛЬТАТ 2: Использовать параметры маршрутизации?

Answer 1

РЕШЕНИЕ 1. Есть ли в Routing расширенная функция для перехода к различным компонентам по одному и тому же URL?

Да, вместо этого вы можете использовать стратегию определения местоположения хешей. Таким образом, ваши страницы будут перенаправлены только под углом.

Пример: http://localhost.com/ Ваш сервер не будет пытаться вернуть страницу для пользователя, вместо этого angular оценит ее и отобразит ваш пользовательский экран.

Единственное, что вам нужно сделать, это запустить useHash с true

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

Это было бы лучшим решением, чем поиск более чистого способа скрытия и отображения компонентов на одной странице.