002.Angular快速上手

快速上手过程中遇到了一些问题，现总结部分问题如下：

1. 快速上手提供的范例问题。

快速上手提供的 预制的范例项目在执行到父级向子级传递数据时报错并不能执行下去。后来发现实际是 products.ts这个文件的内容缺失。可参照此链接，添加接口代码到预制的范例项目中的products.ts文件中。

export interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
}

在stackblitz.com/ 中按照指引做app-product-alerts组件时，会报错。这是因为新定义的组件没有被声明（在IDE类的编辑器中可能不会，其会自动化智能导入）。

//在app.module.ts引入新增组件，并在declarations配置项中追加导入的组件名称
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';

declarations: [
    ProductAlertsComponent
  ],

即便添加，但是页面没有显示，问题没有解决，暂时不知道为什么（通过编辑器编辑则正常访问，因此后续的练习均改为了基于编辑器）。

注意：事件绑定时，事件名称后跟()。

2.数据通信

<!--html模板-->
 <!--父级-->
 <app-product-alerts [product]="product" (notify)="onNotify()"></app-product-alerts>
 <!--子级-->
  <button (click)="notify.emit()">Notify Me</button>

//JavaScript
//可参照vue理解。示例 
  //father--->child
  @Input() product!: Product;
  //child--->father ,by methods
  @Output() notify = new EventEmitter();

简述：

• 父级向子级传递通过属性值；子级向父级传递通过事件派发。需要注意装饰器Input和Output。
• 留意参数属性这种写法。

3.路由配置问题。

• 路由配置路经不允许以‘/’开始。路由使用时，以‘/’开头，数组形式。
• 路由对象结构中snapshot需留意。
• 管道符：用于在html模板中对数据进行修饰。

4.管理数据

• 服务是类的一个实例。