(1)[routerLink]="['/']"报错
出现问题的主要原因是没有在app.module.ts导入router模块,
import { RouterModule } from '@angular/router';
@NgModule({
imports: [
RouterModule.forRoot([{ path: '', component: ProductListComponent }])
]
})
路由这里一定要注意,在@NgModule写法是不加'/'的,但是[routerLink]后面一定要加'/',并且是放在一个数组里面"['/']"。
(2)currency报错
出现问题的主要原因是:
第一个,你是否在app.module.ts引入了该组件
import { ProductDetailComponent } from './product-detail/product-detail.component';
第二个,在上述@NgModule的imports里面的路由定义路径等参数没有
{ path: 'product/:productId', component: ProductDetailComponent }
第三个,最重要的,出错几次了,就是在@NgModule的declarations里面注册组件没有
declarations: [
AppComponent,
TopBarComponent,
ProductDetailComponent,
],
(3)HttpClient 报错
除了需要在cart.service.ts引入HttpClient
import { HttpClient } from '@angular/common/http';
export class CartService {
constructor(private http: HttpClient) {}
getShippingPrices() {
return this.http.get('/assets/shipping.json');
}
}
还需要在app.module.ts的imports引入HttpClientModule
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule
]
})
(4)product参数类型的错误
需要自己手动按照TypeScript规范添加类型限制
(5)关于this.route.paramMap.subscribe()方法报错
要更换写成以下
this.route.params.subscribe()
同时注解一下关于+params['productId'],这个加号的作用就是把字符串变为数字格式
(6)关于this.product = products[+params.get('productId')];匹配数据有漏差
products是个数组,数组的索引以下标为0开始计算
而这里使用的id作为索引,是以1开始计算的哦
改进方式
this.product = products.find(item => {
return item.id === id;
});
(7)关于form表单部分
正常是不会报错的,你自己手动做有可能因为不熟悉造成的错误
这里跟官方例子一致,组件内引入,并且在constructor里面要声明private formBuilder: FormBuilder
import { FormBuilder } from '@angular/forms';
此外,其实在app.module.ts还引入了ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
并在@NgModule的imports里面
@NgModule({
imports: [
ReactiveFormsModule
]
})
最后
我写的这个注意事项只适合刚刚开始看angular的小白,官网的例子还是很好的,只是细节上有些不是很严谨,希望我写的东西对于刚刚学习的新手有一点帮助。
建议学hero那个例子,非常细节以及准确。