Как структурировать angular проект с одним уровнем URL?

Question

Работа на сайте с несколькими разделами: пост, упорядоченный по категориям, видео галерея и т. Д. c .. Мне нужен один URL-адрес уровня (domain.com/page-address). Я могу получить информацию о том, какое представление это page-address должно загружать на лицевой стороне, однако я не смог организовать angular проект хорошо.

Мне удалось заставить все работать, но только через компоненты, в одном модуль и один маршрутизатор-розетка, отправляя все маршруты в один компонент. routes: Routes = [{apth: '**', , component: MainComponent }] и компонент решает, какой компонент должен быть загружен.

/// viewType is retrieved from backend
<app-articles *ngIf="viewType == 'article_categories' || viewType == 'articles'" [viewType]='viewType'></app-articles>
<app-videos *ngIf="viewType == 'video_categories' || viewType == 'video_page'" [viewType]='viewType'></app-videos>
<app-page-not-found *ngIf="viewType == 'page-not-found'" ></app-page-not-found>

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

Также пытался сделать вложенным RouterOutlets, но не смог заставить его работать.

У вас есть решение для этого?

Спасибо

Answer 1

Если я правильно понимаю вашу проблему, я считаю, что одним из решений является использование Express Маршрутизатор на внутренней стороне для обработки вашей маршрутизации. Объяснение Express выходит за рамки ответа о переполнении стека, но на YouTube имеется множество учебных пособий. Я предлагаю серию «MEAN Stack Front-to-Back» от Traversy Media. Он старый, поэтому некоторые его части требуют обходных путей, но его рабочий процесс для настройки маршрутизатора - тот, который я использую с Angular по сей день.

Ваш AppModule будет содержать:

routes: Routes = [
           {path:  '/pathA', , component: ComponentA },
           {path:  '/pathB', , component: ComponentB },
           {path:  '/pathC', , component: ComponentC, canActivate:[AuthGuard] },
]

но фактическая маршрутизация будет обрабатываться через Express Маршрутизатор на стороне сервера.

Существует множество пакетов маршрутизатора для Node; Express это именно то, что я использую.