Question

我下拉列表中的数据是通过WebAPI来自数据库的。如果用户选择任何选项，那么我要从数据库中搜索结果，然后将他重定向到列出结果的另一页。现在我的URL是静态的，例如示例http://localhost:4200/#/search，但我也想在URL中显示选定的文本，例如http://localhost:4200/#/search/selected%20text。请为我提供一些解决方案。

App.Module

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

Answer 1

您可以使用Route Parameters。

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

Answer 2

将参数传递到您的路由文件中

git@github.com:USERNAME/REPOSITORY.git

并在您导航组件的位置传递参数的值

git remote set-url origin git@github.com:<Your USERNAME>/<Your REPOSITORY>.git

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

2 个答案: