无需页面重新加载的Angular路由/交换组件

Question

这是我所拥有的非常基本的设置，

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

在路由器插座内部，我有一个搜索结果组件和一个用户组件

就像这样

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

我正在使用路由器，路由器模块从角度核心，并有搜索结果和用户在它里面，与路径搜索和用户

如果可能的话，我想跳过所有的路径，一旦我在app-search中搜索并按回车，一旦我从服务器得到响应，路由器插座将只显示搜索结果组件，而不重新加载页面

Answer 1

您在此处编写的代码是一个反模式：

<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并发送请求(考虑您有一个带有search方法的SearchService：

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