angular4学习笔记.zip

[{"title":"（ 87 个子文件 2.36MB ） angular4学习笔记.zip","children":[{"title":"模板变量#","children":[{"title":"使用#模板变量就可以访问H5标签的属性值.txt <span style='color:#111;'> 210B </span>","children":null,"spread":false}],"spread":true},{"title":"响应式编程","children":[{"title":"1.Observable.fromEvent处理dom的事件.txt <span style='color:#111;'> 124B </span>","children":null,"spread":false},{"title":"2.使用formControl来监听输入的值，并用流的方式处理","children":[{"title":"input [formControl]=formControl.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"路由","children":[{"title":"8.多路由","children":[{"title":"0.写多个router-outlet标签，用name属性区分开.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"4.通配符：星星==我没指定的路径都去404.txt <span style='color:#111;'> 160B </span>","children":null,"spread":false},{"title":"1.ng new 项目名 --routing 就会生成路由配置文件app-routing.module.ts.png <span style='color:#111;'> 45.87KB </span>","children":null,"spread":false},{"title":"5.给路由传递参数","children":[{"title":"1.传参数","children":[{"title":"2.rest方式传递数据.png <span style='color:#111;'> 12.31KB </span>","children":null,"spread":false},{"title":"1.普通方式传递数据.png <span style='color:#111;'> 6.04KB </span>","children":null,"spread":false},{"title":"3.路由配置传递数据.png <span style='color:#111;'> 15.20KB </span>","children":null,"spread":false},{"title":"3.路由配置传递数据.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"2.rest方式传递数据.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"1.普通方式传递数据.txt <span style='color:#111;'> 300B </span>","children":null,"spread":false}],"spread":true},{"title":"2.取参数值：ActivatedRoute.txt <span style='color:#111;'> 511B </span>","children":null,"spread":false}],"spread":true},{"title":"6.路由重定向","children":[{"title":"0.即访问路由A==访问路由B.txt <span style='color:#111;'> 263B </span>","children":null,"spread":false}],"spread":true},{"title":"9.路由守卫","children":[{"title":"1.3种守卫路由","children":[{"title":"CanActivate：决定是否有权限进入某路由.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"Resolve：初始化某个组件中的被Resolve绑定的类型参数.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"CanDeactivate：决定是否可以离开某路由.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"2.例，需要providers依赖注入守卫路由.txt <span style='color:#111;'> 315B </span>","children":null,"spread":false}],"spread":true},{"title":"0.router-outlet是路由页面占位符.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"7.子路由","children":[{"title":"1.children.png <span style='color:#111;'> 43.40KB </span>","children":null,"spread":false},{"title":"效果图.gif <span style='color:#111;'> 2.19MB </span>","children":null,"spread":false},{"title":"2.当访问home时，展示HomeComponent和XxxComponent的内容，当访问homeyyy时，展示HomeComponent和YyyComponent的内容.txt <span style='color:#111;'> 111B </span>","children":null,"spread":false}],"spread":true},{"title":"2.app-routing.module.ts.txt <span style='color:#111;'> 106B </span>","children":null,"spread":false},{"title":"3.路由跳转","children":[{"title":"1.app.component.html通过H5标签跳转.txt <span style='color:#111;'> 106B </span>","children":null,"spread":false},{"title":"2.在方法中执行router.navigate(['路由']跳转","children":[{"title":"3.测试.txt <span style='color:#111;'> 60B </span>","children":null,"spread":false},{"title":"1.constructor(private router Router).txt <span style='color:#111;'> 42B </span>","children":null,"spread":false},{"title":"2.router.navigate(['books']);.txt <span style='color:#111;'> 54B </span>","children":null,"spread":false}],"spread":false}],"spread":true}],"spread":true},{"title":"组件间通信","children":[{"title":"父子组件通信","children":[{"title":"@Output()","children":[{"title":"0.在父组件中取子组件中的值.txt <span style='color:#111;'> 861B </span>","children":null,"spread":false},{"title":"2.传递参数","children":[{"title":"connInComponents.rar_免费高速下载-百度网盘-分享无限制.url <span style='color:#111;'> 58B </span>","children":null,"spread":false},{"title":"@Output('参数名').txt <span style='color:#111;'> 134B </span>","children":null,"spread":false}],"spread":true},{"title":"1.Output的赋值操作不像Input那样简单，它需要通过位于@angularcore包下的EventEmitter对象来监听并处理数据.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"@Input()","children":[{"title":"在父组件中给子组件赋值.txt <span style='color:#111;'> 313B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"Angular4学习笔记（十）- 组件间通信 - CSDN博客.url <span style='color:#111;'> 84B </span>","children":null,"spread":false},{"title":"非父子组件通信：只能通过共用一个service服务来实现.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"encapsulation","children":[{"title":"理解Angular2的样式和view封装 - Coding I am.url <span style='color:#111;'> 95B </span>","children":null,"spread":false}],"spread":true},{"title":"服务","children":[{"title":"2.注入服务到组件","children":[{"title":"2.providers依赖注入DI.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"1.最简单的方法：称不上依赖注入DI.txt <span style='color:#111;'> 454B </span>","children":null,"spread":false}],"spread":true},{"title":"1.@Injectable().txt <span style='color:#111;'> 322B </span>","children":null,"spread":false}],"spread":true},{"title":"数据绑定","children":[{"title":"1.单向绑定","children":[{"title":"1.H5标签的属性值","children":[{"title":"[属性名]=x.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"属性名={{x}}.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"[attr.属性名]=x.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"4.H5标签的style属性","children":[{"title":"[ngStyle]=“x”.txt <span style='color:#111;'> 270B </span>","children":null,"spread":false},{"title":"[style.属性名]=“x”.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"3.H5标签的class属性","children":[{"title":"[class]=“x”.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"[ngClass]=“x”.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"判断是否要加载类[class.类名].txt <span style='color:#111;'> 67B </span>","children":null,"spread":false},{"title":"class=“{{x}}”.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"2.H5标签的事件处理函数","children":[{"title":"(event)=“x”.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"2.双向绑定","children":[{"title":"[(ngModel)].txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"内容投影","children":[{"title":"1.ng-content是HTML占位符，用时用app-child代替.txt <span style='color:#111;'> 407B </span>","children":null,"spread":false},{"title":"2.理解了ng-content就可以使用@ContentChild装饰器来调用投影内容了，它和@ViewChild非常类似，就不多做介绍了.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"依赖注入DI","children":[{"title":"1.providers中注入要使用的类","children":[{"title":"2.使用工厂模式","children":[{"title":"0.懒得定义TS类了，直接在工厂中写成匿名函数.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"useFactory providers provide.txt <span style='color:#111;'> 242B </span>","children":null,"spread":false}],"spread":true},{"title":"provide定义了token，而useClass则指明了使用的类，此处由于token和实现类相同，均为DefaultBookService因此可以简写为.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"1","children":[{"title":"1.txt <span style='color:#111;'> 72B </span>","children":null,"spread":false},{"title":"2是1的简写形式.txt <span style='color:#111;'> 31B </span>","children":null,"spread":false}],"spread":true}],"spread":true}],"spread":true},{"title":"生命周期钩子","children":[{"title":"指令与组件共有的钩子","children":[{"title":"ngOnInit.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngDoCheck.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngOnDestroy.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngOnChanges.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"组件专有的钩子","children":[{"title":"ngAfterContentInit.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngAfterViewChecked.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngAfterContentChecked.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngAfterViewInit.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"1.调用顺序","children":[{"title":"ngAfterContentInit - 在组件内容初始化之后调用.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngOnDestroy - 指令销毁前调用.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngAfterContentChecked - 组件每次检查内容时调用.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngAfterViewInit - 组件相应的视图初始化之后调用.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngAfterViewChecked - 组件每次检查视图时调用.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngOnInit - 在第一次 ngOnChanges 后调用.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngDoCheck - 自定义的方法，用于检测和处理值的改变.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ngOnChanges - 当数据绑定输入属性的值发生变化时调用.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"0.png <span style='color:#111;'> 45.14KB </span>","children":null,"spread":false},{"title":"OnChanges只对输入的不可变对象起作用","children":[{"title":"典型的不可变对象是string类型，但所有自定义对象均为可变对象.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"可变对象即使被定义为输入属性，也不会触发OnChanges方法.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":false}],"spread":true},{"title":"指令","children":[{"title":"[ng指令].txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"ViewChild,ViweChildren","children":[{"title":"ViewChild：从HTML中获取匹配的元素.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ViewChildren：从HTML中获取匹配的多个元素.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false}],"spread":true},{"title":"管道","children":[{"title":"2.管道也和ng g pipe 管道名 来新建.txt <span style='color:#111;'> 18B </span>","children":null,"spread":false},{"title":"自定义管道.txt <span style='color:#111;'> 479B </span>","children":null,"spread":false},{"title":"1.管道也是组件，所以新建命令仍然是ng g c 管道名.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"ng内置管道.txt <span style='color:#111;'> 279B </span>","children":null,"spread":false}],"spread":true},{"title":"使用angular的插件","children":[{"title":"前端校验插件ngx-bootstrap","children":[{"title":"1.安装ng插件：npm install ngx-bootstrap --save.txt <span style='color:#111;'> 0B </span>","children":null,"spread":false},{"title":"2.引入模块Module.txt <span style='color:#111;'> 247B </span>","children":null,"spread":false},{"title":"3","children":[{"title":"1.在自定义组件(popover.component)中使用此插件.txt <span style='color:#111;'> 636B </span>","children":null,"spread":false},{"title":"2.直接在app.component根组件中使用此插件.txt <span style='color:#111;'> 1024B </span>","children":null,"spread":false}],"spread":false}],"spread":false},{"title":"ngx-bootstrap学习笔记(一)-popover - CSDN博客.url <span style='color:#111;'> 84B </span>","children":null,"spread":false}],"spread":true}],"spread":true}]