路由器找不到组件

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

在angular 6，试试这个代码..

在html部分：

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

在路由 ts:

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

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'

获取路径参数

总而言之，我可以将附加数据作为路径参数或查询参数传递给路由，但我不能将其用于 match/resolve 路由。可以通过调用相应的属性在组件中访问这些参数。

例如。将路径参数和查询参数传递给 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);

但是route路径还是

{
        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 并且路线将匹配任何路线 hero/<something here>（虽然不确定）

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

路由器找不到组件

Router unable to find component

angular6