今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的）
收获：（通过今天的学习，学到了什么知识）
1.生命周期钩子
（1）UI组件的生命周期
①初始化（init）阶段：需把组件new出来，把一些属性设置上去
②渲染（render）阶段：需把组件的模板和数据结合起来，生成HTML标签，并整合到现有DOM树中
③存活阶段:那么在组件的存活期内就一定会和用户进行交互。一般来说，带有 UI 的系统都是通过事件机制进行用户交互的。也就是说，这个阶段将会处理大量的用户事件，如鼠标点击、键盘按键、手指触摸。
④销毁（destory）阶段：组件使用完了，需要把一些资源释放掉。最典型的操作是需要把组件上的所有事件全部清理干净，避免造成内存泄漏。
在组件生命的不同阶段，框架一般会暴露出一些“接口”，开发者可以利用这些接口来实现一些自己的业务逻辑。这种接口在有些框架里面叫做“事件”，在Angular 里面叫做“钩子”，但其底层的本质都是一样的。
（2）angular组件的生命周期钩子
绿色的 4 个钩子可能会被执行很多次，紫色的只会执行一次。
（3）onpush策略
当某个叶子组件上的数据模型发生了变化之后，Angular 将会从根组件开始，遍历整颗组件树，把所有组件上的ngDoCheck() 方法都调用一遍。
因此 Angular 提供了一种叫做 OnPush 的策略，只要把某个组件上的检测策略设置为 OnPush，就可以忽略整个子树了。
Angular 内置的两种变更检测策略如下。
Default：无论哪个组件发生了变化，从根组件开始全局遍历，调用每个组件上的 ngDoCheck() 钩子。
OnPush：只有当组件的 @Input 属性发生变化的时候才调用本组件的 ngDoCheck() 钩子。
2.模块@NgModule
（1）@ngmodule的定义方式
import { BrowserModule } from '@angular/platform‐browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestViewChildComponent } from './test‐view‐child/test‐view‐child.component';
import { ChildOneComponent } from './test‐view‐child/child‐one/child‐one.component';
@NgModule({
eclarations: [
AppComponent,
TestViewChildComponent,
ChildOneComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
declarations：放组件、指令、管道的声明
import：导入外部模块
provider：需要使用的service
bootstrap：定义启动组件，也就是说可以指定做个组件作为启动点，但是这种用法是很罕见的。
（2）@ngmodule的重要作用
①把关系比较紧密的组件组织到一起
②控制组件、指令、管道的可见性，同一ngmodule里组件默认互相可见，对外部组件，只能看到ngmodule导出（exports）的内容。也就是说，如果你定义的 NgModule 不 exports 任何内容，那么外部使用者即使 import 了你这个模块，也没法使用里面定义的任何内容。
③ngmodule是@angular/cli打包的最小单位
④NgModule 是 Router 进行异步加载的最小单位，Router 能加载的最小单位是模块，而不是组件。
3.路由（router）
Angular 中的 Router 模块会负责模块的加载、组件的初始化、销毁等操作，它是整个乐队的总指挥。
（1）前端为什么要路由
①如果没有router，浏览器前进后退按钮没法用
②如果没有路由，无法把url复制并分享。
router的本质是记录当前页面状态，和当前页面上展示的内容一一对应。
在angular，router是独立模块，定义在@angular/router模块里，有以下作用：
①配合ngmodule进行模块的懒加载、预加载
②管理组件的生命周期，负责创建、销毁组件
（2）服务端的配置
需要配置一下server才能很好的支持前端路由
4.路由的使用
（1）路由器的基本用法
①app.routes.ts 里面就是路由规则配置
②app.module.ts 里面首先需要 import 这份路由配置文件：
import { appRoutes } from './app.routes';
然后@ngmodule里的imports内容如下：
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes,{enableTracing:true})
]
注意路由配置文件 app.routes.ts 里面的写法，里面全部用的component 配置项，这种方式叫“同步路由”。也就是说，@angular/cli 在编译的时候不会把组件切分到独立的 chunk（块）文件里面去，当然也不会异步加载，所有的组件都会被打包到一份 js 文件里面去。
返回列表
评论