Angular решение проблемы навигации маршрутизатора - PullRequest
Новая
       54

Angular решение проблемы навигации маршрутизатора

0 голосов
/ 08 июля 2020

У меня создано наше веб-приложение, внешняя оболочка которого визуализирована из app.components. html

идея заключается в том, что нижний колонтитул верхнего колонтитула остается прежним, и только средняя часть - это динамика c. Средняя часть в основном состоит из нескольких angular компонентов, завернутых внутри ng-контейнера и отображаемых, если currentItem == 'some value'. 

<ng-container *ngIf="current-item === 'contact'>
   <app-contact-component></app-contact-component>
</ng-container>
<ng-container *ngIf="current-item === 'about'>
   <app-about-component></app-about-component>
</ng-container>
<ng-container *ngIf="current-item === 'service'>
   <app-service-component></app-service-component>
</ng-container>
<ng-container *ngIf="current-item === 'business'>
   <app-business-component></app-business-component>
</ng-container>

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

site.com / biz / companyA site.com/biz/companyX

мы реализовали код с помощью activateRoute и также можем читать параметр пути . Единственная проблема заключается в том, что когда пользователь делает вышеуказанный URL-адрес в браузере, не остается и меняет его на site.com

Как сохранить URL-адрес в адресной строке?

Мы попробовали Методика, при которой мы добавили новый маршрут к маршрутизатору, как показано ниже 

const routes: Routes = [
  {path: '', redirectTo: '', pathMatch: 'full'},
  {path: 'biz/:id', component: BusinessProfileComponent}
];

, проблема в том, что страница выходит из строя, поскольку она пытается отобразить все, что есть на базовой странице, плюс businessProfileComponent.

1 Ответ

0 голосов
/ 11 июля 2020

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

...