我正在关注https://angular.io/start/routing上的 Angular 教程。但是，经过某个步骤后，我的浏览器会显示一个空白页面并
Error: Can't resolve all parameters for ProductDetailsComponent: (?)在控制台中给我。
我尝试了不同的浏览器（默认使用 Firefox），并评论/玩弄代码以查看导致错误的确切行（private route: ActivateRoute在 product-details.component.ts 的构造函数中）。还检查了拼写错误/我是否确实错过了教程中的某些内容，但据我所知，我已将其 100% 遵循。
我还将 Ubuntu Mate 19.04 与 IntelliJ IDEA 一起使用。
产品详细信息.component.ts：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { products } from '../products';
export class ProductDetailsComponent implements OnInit {
product;
constructor(
private route: ActivatedRoute,
) { }
}
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.product = products[+params.get('productId')];
});
}
}
产品详细信息.component.html：
<h2>Product Details</h2>
<div *ngIf="product">
<h3>{{ product.name }}</h3>
<h4>{{ product.price | currency }}</h4>
<p>{{ product.description }}</p>
</div>
产品列表.component.ts：
import { Component } from '@angular/core';
import { products } from '../products';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent {
products = products;
share() {
window.alert('The product has been shared!');
}
onNotify() {
window.alert('You will be notified when the product goes on sale');
}
}
产品列表.component.html：
<h2>Products</h2>
<div *ngFor="let product of products; index as productId">
<h3>
<a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
{{ product.name }}
</a>
</h3>
<p *ngIf="product.description">
Description: {{ product.description }}
</p>
<button (click)="share()">
Share
</button>
<app-product-alerts
[product]="product"
(notify)="onNotify()">
</app-product-alerts>
</div>
app.module.ts：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';
import { ProductDetailsComponent } from './product-details/product-details.component';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
RouterModule.forRoot([
{ path: '', component: ProductListComponent },
{ path: 'products/:productId', component: ProductDetailsComponent },
])
],
declarations: [
AppComponent,
TopBarComponent,
ProductListComponent,
ProductAlertsComponent,
ProductDetailsComponent,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
产品.ts：
export const products = [
{
name: 'Phone XL',
price: 799,
description: 'A large phone with one of the best screens'
},
{
name: 'Phone Mini',
price: 699,
description: 'A great phone with one of the best cameras'
},
{
name: 'Phone Standard',
price: 299,
description: ''
}
];
本教程中预期的结果是路由将我从主视图重定向到特定产品的视图，但是在添加上述行之后，该站点仅显示一个空白页面。