Question

我目前正在按照本网站https://angular.io/start/routing

上的教程尝试学习一些Angular。

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

如果我将product / 1附加到URL的末尾，则可以直接访问该页面（这将显示Phone XL的信息）多次将代码与网站上的代码进行比较，以防出现错别字，但我找不到

app.module.ts

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

product-list.component.html

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

product-details.components.ts

export class ProductDetailsComponent implements OnInit {

product;

constructor(
private route: ActivatedRoute,
) { }

ngOnInit() {
    this.route.paramMap.subscribe(params => {
       this.product = products[+params.get('productId')];
    });
}

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

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：'products，％20productId'

Answer 1

尝试如下修改您的product-list.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>

errors.ts：30错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：'products，％20productId'

1 个答案: