Question

我已经在app-routing.module.ts中定义了一条路线

//question-details;question-id=a5551f5d-e8c6-4b1a-a7e2-6c878de291c7
  {
    path:'question-details;question-id=:id',
    component:QuestionDetailsComponent
  }


@NgModule({
  imports:[RouterModule.forRoot(routes)], //
  exports: [RouterModule],
  providers:[]
})

export class AppRoutingModule{}

单击html按钮后，该路线应被激活。

<button  [routerLink]="[questionDetailRouterLink,{'question-id':question['question-id']}]" id="{{'show-more-button-'+(i+1)}}" class="btn content-div__button--blue btn-sm">Show more</button>

questionDetailRouterLink定义为

export var QUESTION_DETAIL_ROUTER_LINK = '/question-details';
questionDetailRouterLink = QUESTION_DETAIL_ROUTER_LINK

单击按钮后，浏览器中的url更改为localhost:9000/question-details;question-id=a5551f5d-e8c6-4b1a-a7e2-6c878de291c7

但是未显示QuestionDetailsComponent。我在做什么错了？

RouterModule被定义为

app.module.ts

imports: [
    AppRoutingModule,
  ...
]

Answer 1

6号角，请尝试此代码..

在html部分：

List<String> list = ["B", "C", "D"];
list.insert(0, "A"); // at index 0 we are adding A
// list now becomes ["A", "B", "C", "D"]

在路由ts中：

 <a [routerLink]="['/question-details/question-id']" mat-icon-button color="primary" [queryParams]="{question-id: id}">click here</a>

Answer 2

您可以在HTML中使用以下内容

    <button class="btn btn-info" [routerLink]="['/question-details']" [queryParams]="{question-id:id}">Show More</button>

在路由模块中

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { QuestionDetailsComponent } from 'ComponentPath';

    const routes: Routes = [
      { path: 'question-details', component:QuestionDetailsComponent },
    ];

    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

Answer 3

似乎我无法使用查询参数（由?表示）或路径参数（由;表示）指定完整的路由，即我无法按照以下说明进行操作找不到组件

path:'question-details?question-id=:id',   //question-details?question-id=a5551f5d-e8c6-4b1a-a7e2-6c878de291c7 - qusetion id is a query parameter
path:'question-details;question-id=:id', //question-details;question-id=a5551f5d-e8c6-4b1a-a7e2-6c878de291c7 - question id is a path parameter

我只需要保留路由直到问题细节，然后在组件中提取查询或路径参数（无论使用什么）

{
    path:'question-details',
    component:QuestionDetailsComponent
  }

我正在将question-id作为html中的路径参数-<button [routerLink]="[questionDetailRouterLink, {'question-id':question['question-id']}]" id="{{'show-more-button-'+(i+1)}}" class="btn content-div__button--blue btn-sm">Show more</button>

在组件中，通过调用this.question_id = this.route.snapshot.paramMap.get("question-id");//question-details;question-id=:id'

获得路径参数

总而言之，我可以将其他数据作为路径参数或查询参数传递给路由，但不能使用它来匹配/解析路由。可以通过调用相应的属性在组件中访问这些参数。

例如。将路径参数和查询参数都传递到routerlink

<button  [routerLink]="[questionDetailRouterLink, {'question-id':question['question-id']}]" [queryParams]="{'query1':'value1'}"  id="{{'show-more-button-'+(i+1)}}" class="btn content-div__button--blue btn-sm">Show more</button>

在相应组件中访问它们

console.log("path params are :"+this.route.snapshot.paramMap);
    console.log("query params are :"+this.route.snapshot.queryParamMap);

但是路径仍然是

{
        path:'question-details',
        component:QuestionDetailsComponent
      }

上面将打印以下内容

path params are : 
ParamsAsMap {params: {…}}
keys: (...)
params: {question-id: "a5551f5d-e8c6-4b1a-a7e2-6c878de291c7"}
__proto__: Object
question-details.component.ts:96 query params are : 
ParamsAsMap {params: {…}}
keys: (...)
params: {query1: "value1"}
__proto__: Object

哪个让我怀疑id在path: 'hero/:id'中是什么意思。看来id的值将介于hero/和路由中的第一个;或?之间。如果路由是hero/my-hero/42?name=Manu或hero/my-hero/42;name=Manu或hero/my-hero/42;age=40?name=Manu，则三个中的id将是my-hero/42，并且该路由将匹配任何{{1 }}（尽管不确定）

这是一篇有关URL的精彩文章-https://skorks.com/2010/05/what-every-developer-should-know-about-urls/

路由器无法找到组件

3 个答案: