Question

我想在点击搜索按钮时在我的网址中传递参数。我希望它看起来像这样。 /导致？搜索=树液

但是，我在控制台中收到此错误。错误：无法匹配任何路由。网址细分：'结果;搜索= sap' 我无法弄清楚我做错了什么。这是我的代码。

SearchComponent.ts

search(){
    //this function is accessed when a user clicks on a search button in the HTML
    this.router.navigate(['/result', { search: this.query }]);
    //this.query = sap
}

AppModule.ts

 const routes: Routes = [
    //other routes here
  { path: 'result/:search', component: SearchComponent}
 ];

@NgModule({
  declarations: [
    //other components
    SearchComponent
  ] ,
  imports: [
    //other modules
    RouterModule.forRoot(routes, {}),

  ],

Answer 1

如果您需要查询参数，您的路线配置需要如下所示：

 const routes: Routes = [
    //other routes here
  { path: 'result', component: SearchComponent}
 ];

查询参数是可选的，因此路由配置中包含不。

navigate中查询参数的语法如下：

this.router.navigate(['/result'], 
                     {queryParams: { search: this.query }});

结果URL应如下所示：

http://localhost:4200/result?search=sap

有关详情，请参阅此帖子：Sending data with route.navigate in Angular 2

Answer 2

你正在做的是混合2种不同的url参数技术。

<强> 1。 {path：'result /：search'，component：SearchComponent} 这是参数化的url技术。它意味着这个url必须总是在结果部分后面有一些东西。

例如：

result / qwe（这里qwe将映射到搜索）

result / asdasd（这里asdasd将映射到搜索）

结果（由于结果后没有任何部分，这是错误）

<强> 2。结果？搜索= QWE

此处，参数搜索是可选的。如果您希望您的网址像 / result？search = qwer 那样工作，那么一个。保持路线 {path：'result'，component：SearchComponent} 。湾使用Route或ActivatedRoute的参数。喜欢 this.route.param.subscribe（param =＆gt; console.log（param））

当我想在URL中传递参数时，会读取错误的URL

2 个答案: