在Angular 6中,可以通过使用动态路由和查询参数来在URL中显示搜索文本。下面是一个示例解决方法:
首先,创建一个搜索组件,并在其中包含一个输入框用于输入搜索文本:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-search',
template: `
`
})
export class SearchComponent {
searchText: string;
constructor(private router: Router) {}
search() {
// 导航到带有查询参数的搜索结果路由
this.router.navigate(['/search-results'], { queryParams: { q: this.searchText } });
}
}
接下来,创建一个搜索结果组件,并获取搜索文本的查询参数值:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-search-results',
template: `
Search Results
Search Text: {{ searchText }}
`
})
export class SearchResultsComponent implements OnInit {
searchText: string;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// 获取查询参数值
this.route.queryParams.subscribe(params => {
this.searchText = params['q'];
});
}
}
最后,定义动态路由和模块:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SearchComponent } from './search/search.component';
import { SearchResultsComponent } from './search-results/search-results.component';
const routes: Routes = [
{ path: 'search', component: SearchComponent },
{ path: 'search-results', component: SearchResultsComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
确保将这些组件和路由模块添加到你的应用程序中,并将
放在适当的位置,以便正确显示搜索结果。
现在,当用户在搜索输入框中输入文本并点击搜索按钮时,它将导航到/search-results?q=
,其中
是用户输入的搜索文本。在搜索结果组件中,你可以使用this.searchText
来显示搜索文本。
希望这个解决方法对你有帮助!