错误.ts：30 错误 错误：未捕获(承诺)：错误：无法匹配任何路由。网址细分：'products,%20productId'

Question

我目前正在尝试按照本网站中的教程学习一点 Angular https://angular.io/start/routing

到目前为止，我一切正常，直到路由部分。

如果我将产品/1附加到URL的末尾，我可以直接访问该页面(这显示了Phone XL的信息( 已将代码与网站上的代码进行了多次比较，以防有任何拼写错误，但我找不到任何

app.module.ts

@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: ProductListComponent },
{ path: 'products/:productId', component: ProductDetailsComponent },
])
],

产品列表组件.html

<div *ngFor="let product of products; index as productId">
<h3>
<a [title] = "product.name + ' details'" [routerLink]="['/products, productId']">
{{product.name}}
</a>
</h3>

产品详细信息.组件.ts

export class ProductDetailsComponent implements OnInit {
product;
constructor(
private route: ActivatedRoute,
) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.product = products[+params.get('productId')];
});
}

我目前遇到的问题是路由不起作用，即单击产品名称，用户未重定向到 URL 当我检查页面时，出现此错误：

错误 错误：

未捕获(在承诺中(：错误：无法匹配任何路由。 网址段： '产品，%20productId'

Answer 1

尝试修改您的产品列表.component.html如下所示，[routerLink] 采用一系列值：

<div *ngFor="let product of products; index as productId">
<h3>
<a [title] = "product.name + ' details'" [routerLink]="['products', productId]">
{{product.name}}
</a>
</h3>