angular总结1

1.angular程序架构

注：模块是一处完整的单元，由组件、指令、服务等组成，像积木一样，组件、指令、服务如同不同颜色、大小的积木，而模块则是这些积木组成的一个成品，如汽车、楼房等

2. 组件的必备元素为：装饰器（组件元数据装饰器@component),模板，控制器组成

装饰器：@component通知angular如何处理typescript类，component包含多个属性，这些属性叫做元数据，angular通过这些元数据来装饰typescript类

控制器：typescript类，被component装饰器来装饰器，与模板进行数据绑定进行通讯

angular非必备元素：

输入属性@inputs()：用于接受外部传入的数据的，输入属性选择父组件可以直接传递数据给子组件，真个大组件就是一个组件树，父组件可拥有N个子孙组件，输入属性便是在这个组件树中进入传输数据的

提供器（providers)：用于做依赖注入

生命周期勾子：组件从创建至销毁的过程

样式表：组件可关联一些样式表

动画：可自定义一些动画效果

输出属性@outputs()：与输入组件相对使用，用于定义一些其他组件可能会感兴趣的事件，用于在组件间共享数据

3. 模块（app.module.ts)

使用@NgModule装饰器，其元数据有：

declarations: 所有的组件视图，只能声明组件、指令、管道

imports：依赖模块

providers: 用于声明服务

bootstrap:用于声明主模块

4. 引入第三库：jquery

(1) npm install jquery --save //--save将插件信息写入package.json

(2) 修改angular-cil.json文件

app下的styles属性添加样式文件

app下的script属性配置第三方插件 // ./node_modules/jquery/dist/jquery.js

(3) npm install @types/jquery --save //使typescript识别jquery语法

(4) tsconfig.app.json 引入 jquery 的类型声明文件
“types”: [ “../node_modules/@types/jquery/index.d.ts”] 
你也可以直接这么做：”types”:[“jquery”]

5. 生成组件命令

ng g component 组件名 //自动生成‘组件名’文件夹，其中包含html, ts, css, spe.ts四个文件，并会将信息更新至app.module.ts文件中

6.路由

单页应用（SPA)：主页面只加载一次，不再刷新，只是改变页面上部分内容的应用，angular使用路由器来实现不跳转页面来加载应用的功能

  根路由：{path: '不可以/开关', component: '组件名'}        模板中可使用[routerLink]="['/']"路由跳转

子路由（路由父子关系）：children: [path: '/seller/:id', component: HomeCoponent] 模板中使用[routerLink]="['./seller', 9]" // ./相对父路由，/相对根路由

保护路由：

     辅助路由（路由兄弟关系）：[routerLink]="[{outlets: {primary: 'home', aux: 'chat'}}]"    //切换辅助路由时，主路由同时跳转至home

路由对象简介：

如何在路由时传递数据

（1）在查询参数中传递数据

/product？id=1&name=2 可使用ActivatedRoute.snapshot.queryParams['id']来获取数据参数

（2）在路由的路径中传递数据

{path: 'product/:id'} 可使用ActivatedRoute.snapshot.params[id]来获取数据

（3）在路由配置中传递数据

{path:'product', component: ProductComponent, data: [{isProd: true}] 使用ActivatedRoute.data[0][isProd]来获取数据。

注： snapshot参数快照，存在问题：数据存在误差，当两个相同路由进行导航时，由于 ngOnit只在组件创建时初始化一次，

故在第二次导航时不会再调用此生命周期，故在生命周期中获取参数获取的还是第一次的

改善：使用订阅的方式，修改(2) 的参数获取方法

this.ActivatedRoute.params.subscribe((params: Params) => this.productId = params['id']);