Angular компоненты маршрутизации / коммутации без перезагрузки страницы - PullRequest
Новая
       1

Angular компоненты маршрутизации / коммутации без перезагрузки страницы

0 голосов
/ 15 марта 2020

Это очень базовая c настройка того, что у меня есть, 

<app-header></app-header>
<app-search></app-search>
<router-outlet></router-outlet>
<app-footer></app-footer>

, а внутри маршрутизатора у меня есть комп-результат поиска onet и пользовательский компонент

вроде такого 

const routes: Routes = [
    { path: 'search', component: SearchResultComponent },
    { path: 'user', component: UserComponent}
];

Я использую маршрутизатор, модуль маршрутизатора из ядра angular, и в нем есть результаты поиска и пользователь, с поиском пути и пользователем

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

1 Ответ

0 голосов
/ 15 марта 2020

Код, который вы здесь написали, является антипаттерном: 

<router-outlet>
  <search-result></search-result>
  <user></user>
</router-outlet>

Директива RouterOutlet не должна содержать ничего. Это просто заполнитель для загруженных маршрутов компонентов.

Если вы хотите добиться этого, вам нужно определить маршруты. SearchComponent вызовет, скажем, this.router.navigate(['search'], { queryParams: { query: 'what your used typed' } });

Затем определите маршрут к SearchResultComponent: { path: 'search', component: SearchResultComponent }

Наконец, в SearchResultComponent подпишитесь на queryParams и отправить запрос (учитывая, что у вас есть SearchService с search методом: 

this.activatedRoute.queryParams
    .pipe(switchMap(params => this.searchService.search(params['query'])))
    .subscribe(result => this.result = result);
...