Angular 动态路由显示URL 6中的搜索文本

Angular 动态路由显示URL 6中的搜索文本,angular,Angular,我有一个下拉列表,其中数据通过WebAPI来自数据库。如果用户选择了任何选项,那么我将从数据库中搜索结果,并将其重定向到另一个页面,其中列出了结果。现在我的URL是静态的,就像示例一样http://localhost:4200//search 但我想在URL中也显示选定的文本,如http://localhost:4200//search/selected%20text. 请提供一些解决方案,谢谢 应用程序模块 const routes: Routes = [ { path: '',

我有一个下拉列表,其中数据通过WebAPI来自数据库。如果用户选择了任何选项,那么我将从数据库中搜索结果,并将其重定向到另一个页面,其中列出了结果。现在我的URL是静态的,就像示例一样http://localhost:4200//search 但我想在URL中也显示选定的文本,如http://localhost:4200//search/selected%20text. 请提供一些解决方案,谢谢

应用程序模块

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