Angular官网快速上手例子踩坑日记

（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那个例子，非常细节以及准确。