无需重新加载页面的角度路由/切换组件

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}
];

我正在使用路由器，来自角度核心的路由器模块，并在其中包含搜索结果和用户，以及路径搜索和用户

如果可能的话，我想一起跳过路径，一旦我在应用程序搜索中搜索某些内容并按 Enter，一旦我得到服务器的响应， 路由器出口将只显示搜索结果组件而不重新加载页面

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

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