Angular 动态路由显示URL 6中的搜索文本
我有一个下拉列表,其中数据通过WebAPI来自数据库。如果用户选择了任何选项,那么我将从数据库中搜索结果,并将其重定向到另一个页面,其中列出了结果。现在我的URL是静态的,就像示例一样http://localhost:4200//search 但我想在URL中也显示选定的文本,如http://localhost:4200//search/selected%20text. 请提供一些解决方案,谢谢 应用程序模块Angular 动态路由显示URL 6中的搜索文本,angular,Angular,我有一个下拉列表,其中数据通过WebAPI来自数据库。如果用户选择了任何选项,那么我将从数据库中搜索结果,并将其重定向到另一个页面,其中列出了结果。现在我的URL是静态的,就像示例一样http://localhost:4200//search 但我想在URL中也显示选定的文本,如http://localhost:4200//search/selected%20text. 请提供一些解决方案,谢谢 应用程序模块 const routes: Routes = [ { path: '',
const routes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'en',
loadChildren: "src/app/views/site-feedback/site-feedback.module#SiteFeedbackModule"
},
{
path: 'en',
loadChildren: "src/app/views/privacy-policy/privacy-policy.module#PrivacyPolicyModule"
},
{
path: 'en',
loadChildren: "src/app/views/contact-us/contact-us.module#ContactUsModule"
},
{
path: 'en',
loadChildren: "src/app/views/data-coverage/data-coverage.module#DataCoverageModule"
},
{
path: 'subscription',
loadChildren: "src/app/views/subscribe/subscribe.module#SubscribeModule"
},
{
path: 'en',
loadChildren: "src/app/views/terms-conditions/terms-conditions.module#TermsConditionsModule"
},
{
path: 'member',
loadChildren: "src/app/views/dashboard/dashboard.module#DashboardModule"
},
{
path: 'search',
loadChildren: "src/app/views/result-listing/result-listing.module#ResultListingModule"
}
]
可以使用管线参数
url可以是http://localhost:4200//search/selected%20text,并且在路由文件中,路径可以是
{
path: 'search/:searchText',
loadChildren: "src/app/views/result-listing/result-listing.module#ResultListingModule"
}
然后您可以像这样检索searchText
import {ActivatedRoute} from '@angular/router';
...
constructor(private route: ActivatedRoute){ }
searchText: String;
ngOnInit() {
this.searchText = this.route.snapshot.params['searchText'];
}
将参数传递到路由文件中
{
path: 'search/:SearchText',
loadChildren: "src/app/views/result-listing/result-listing.module#ResultListingModule"
},
并从导航组件的位置传递参数值
constructor(private _router: Router){}
changeRecent(SearchText: string) {
this._router.navigate(['/search', SearchText])
}