Угловая маршрутизация нескольких компонентов по пути к домашней странице

Question

Допустим, я хочу иметь настройку, аналогичную facebook.com.Выйдя из системы, содержимое этого URL является обычной домашней страницей с информацией о Facebook и формой входа.При входе в систему этот же URL (facebook.com, без определенного маршрута) теперь отображает поток данных.

Как правильно реализовать это?

Я думал о том, чтобы просто иметьчто-то вроде:

<div *ngIf="isLoggedIn; else loggedOut">
  <internal-dashboard-component></internal-dashboard-component>
</div>

<ng-template #loggedOut>
  <external-home-component></external-home-component>
</ng-template>

Но это кажется немного сложным.

Это логический подход?Есть ли что-то, что можно сделать с помощью угловой маршрутизации, которую мне не хватает ??

Answer 1

Angular имеет то, что называется URL Matcher.Он используется для указанного вами случая, два компонента по одному пути.Вы можете прочитать больше об этом здесь .

Его использование выглядит примерно так:

{
 path: 'Path',
 matcher: firstMatcher,
 loadChildren: '../login/login.module'
},
{
 path: 'Path',
 matcher: secondMatcher,
 loadChildren: '../dashboard/dashboard.module'
}

Вы можете узнать больше о том, как его реализовать в этомкомментарий к аналогичному вопросу (как разместить два компонента по одному пути).

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

<div *ngIf="!isLoggedIn">
  <internal-dashboard-component></internal-dashboard-component>
</div>

<router-outlet *ngIf="isLoggedIn"></router-outlet>

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

Answer 2

Вы также можете проверить, вошел ли пользователь в систему при первом запуске приложения, а затем маршрутизировать пользователя программно, используя вместо * ngIf:

this.router.navigate(['/home']);

Сохранить вИмейте в виду, что независимо от того, что вы делаете здесь, в Angular, все еще обрабатываются на стороне клиента, поэтому в зависимости от того, что вы пытаетесь обезопасить, вы можете захотеть рассмотреть обработку этой пользовательской проверки на стороне вашего приложения.