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

我使用的是路由器，角核的routermodule，并在其中包含搜索结果和用户，以及路径搜索和用户

如果可能的话，我想一起跳过所有路径，并且一旦我在应用程序搜索中搜索到某项内容并按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);

角路由/开关组件，无需重新加载页面

1 个答案: