Angular里的routerLink不能按照期望工作的一个问题
I have created a custom module with the following routing settings:
const CUSTOM_ROUTES: Routes = [
{ path: 'custom', component: CustomPageComponent, canActivate: [CmsPageGuard] },
{ path: 'custom2', component: CustomPageComponent },
{
path: 'faq-alias', component: PageLayoutComponent, canActivate: [CmsPageGuard],
data: {
pageLabel: 'faq'
}
}
];
@NgModule({
declarations: [CustomPageComponent],
imports: [
CommonModule,
UrlModule,
RouterModule.forChild(CUSTOM_ROUTES),
ConfigModule.withConfig({
routing: {
routes: {
product: {
paths: [
'jerrycamera/:manufacturer/:name/:productCode',
'cameras/:name/:productCode'],
paramsMapping: {
name: 'nameForUrl'
}
}
}
}
} as RoutingConfig),
the /custom url points to my custom component with html template below:
<p>custom-page works!</p>
<a href="/cameras/photosmart-e317-digital-camera/300938">Awesome Product</a>
<p></p>
<a [routerLink]="{ cxRoute: 'product', params: {code: '300938'}} | cxUrl">Awesome Product 2</a>
when I click hyperlink “Awesome Product 2”, I expect to navigate to the product detail page for product 300938:
Unfortunately it does not work. When I click the hyperlink, it will open http://localhost:4200/electronics-spa/en/USD instead.
I observed in Chrome development tool, that every time I open url http://localhost:4200/electronics-spa/en/USD/custom, there is warning message reported in Chrome console:
No configured path matches all its params to given object. Route config:
This just points to my route configuration hard coded in .
I am exactly following the same source code as found in training video:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法