2017年11月_橘柚子

11月 10月 04月 03月 02月 01月

原创 View钩子

1.父组件调用子组件的方法（1）子组件的控制器export class TreeChildComponent implements OnInit { constructor() { } ngOnInit() { } greeting(name:string){ console.log('hello'+name) }}（2）父组件调用A.模板<app-tre...

2017-11-25 17:37:56 231

原创 Angular4 变更检测和Docheck钩子

1.变更检测机制（1）目的：保证组件属性和浏览器的显示同步，浏览器里面发生任何异步变化都会触发“变更检测”，当变更检测运行时，会检测应用中所有的绑定关系。（2）检测策略： A:Default策略：检查所有组件 B.Onpush策略：阻止检查继续走下去（3）DoCheck钩子的调用import { Component, OnInit, Input, OnC

2017-11-25 16:28:45 6510

原创 Angular4 组件生命周期钩子

1.组件生命周期调用顺序import { Component, OnInit, OnChanges, DoCheck, AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, SimpleChanges, Input } from '@angular/core';let logIndex:number=1

2017-11-25 14:58:40 777

原创中间人模式

应用场景：搜索组件，购物车组件，主组件充当中间人（1）股票搜索组件中，发射一个EventEmitter 类型的事件addCart,并将股票信息也发射出去import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';@Component({ selector: 'app-search-sto

2017-11-25 11:30:06 449

原创 Angular @Input() @Output()

1.@Input()组件的输入属性，是指被@Input()注解的属性，用来从父组件接收数据（1）父组件A.父组件模板我是父组件B.父组件控制器export class AppComponent { public search:string;}（2）子组件A.模板我是子组件股票搜索的关键字是{{keyword}}B.控制器export c

2017-11-24 17:30:44 797

原创 Angular4 第五章响应式编程

1.观察者模式与Rxjs（1）可观察对象，在初始化时注册观察者对象（2）观察者，在可观察对象发生变化调用观察者的方法做相应的处理import {Observable} from "rxjs"; //javascript的响应式编程包，angular框架依赖于它var subscription=Observable.from([1,2,3,4]) //创建流，就是可观察对象，也叫被观察者.f...

2017-11-23 17:13:59 397

原创 Angular4 第五章数据绑定

1.Dom属性和HTML属性的关系（1）少量的HTML属性和DOM属性之间有着1:1的映射，如id（2）有些HTML属性没有对应的DOM属性，如colspan（3）有些DOM属性没有对应的HTML属性，如textContent（4）就算名字相同，HTML属性和DOM睡醒也不是同一个东西（5）HTML属性的值指定了初始值；DOM属性的值表示当前值。 DOM属性的值可以改变；HTML属...

2017-11-21 21:38:27 367

原创 Angular4 第四章使用工厂方法和值对象声明提供器

1.工厂方法提供器声明 useFactory providers: [ { provide:StockService, useFactory:(logger:LoggerService)=>{ //let logger=new LoggerService(); //耦合性 let dev=Math.random()>0.5;

2017-11-17 18:25:28 627

原创 Angular4 第四章依赖注入实战

创建服务的命令：ng g service shared/stock ，生成了stockService的服务，需要声明该服务的提供器创建组件stock : ng g component stock1.依赖注入，提供器声明在模块中（1）编写服务提供器。shared\stock.service.ts 编写一个股票信息类，和一个getProduct方法，import { Injec

2017-11-17 17:32:32 296

转载 Angular4 第四章依赖注入基本概念

在Angular中使用依赖注入，可以帮助我们实现松耦合，可以说只有在组件中使用依赖注入才能真正的实现可重用的组件。如果我们有个服务product.service.ts，其中export了一个ProductService类，类中有一个getProduct方法。如果不使用依赖注入，假设我们需要在product组件中使用这个服务时就会new一个ProductService类，但如果这个组件被

2017-11-17 15:47:02 281

原创 Angular4 路由实战

在app.module.ts中做如下处理加入导航路由配置const routeConfig:Routes[ {path:'stock',component:StockManagerComponent}]//将上面的路由配置加入项目的根模块里面imports:[ RouterModule.forRoot(routeConfig)]

2017-11-16 18:06:29 203

原创 Angular4 第三章（下）路由守卫

路由守卫，实际意义是拦截器，在你进入路由或离开路由执行一些逻辑。1.路由守卫有三种：（1）CanActivate:处理导航到某路由的情况（2）CanDeactivate:处理从当前路由离开的情况（3）Resove 在路由激活之前获取路由数据2.路由守卫实战：【CanActivate】第一步：写出CanActivate路由守卫的验证规则创建文件 app/guard

2017-11-16 16:09:54 701

原创 Angular4 第三章（中）重定向路由，子路由，辅助路由

1.重定向路由:在用户访问一个特定的地址时，将其重定向到另一个指定的地址 eg : www.aaa.com => www.aaa.com/products www.aaa.com/x=>www.aaa.com/yconst routes:Routes = [{path:'', redirectTo: '/home', pa

2017-11-10 11:45:34 5683 2

原创 Augular4 第三章（上）路由基本概念，路由的配置，路由的参数传递

1.路由的基本概念（1）Routes:路由的配置，保存着哪个URL对应展示哪个组件，以及在哪个RouterOutlet中展示组件（2）RouterOutlet:在html中标记路由内容呈现位置的占位符指令（3）Router :负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由（4）RouterLink:在HTML中声明路由导航用...

2017-11-09 13:52:31 572

原创 Augular4 第二章 angular架构的基本概念

angular架构的基本概念（1）组件：是angular应用的基本构建块，你可以把组件理解为一段带有业务逻辑和数据的html，组件有父组件，子组件，孙子组件（2）服务：用来封装可重用的业务逻辑，组件可以调用服务，服务也可以调用服务（3）指令：允许你向html添加自定义行为（4）模块：模块用来将应用中不同的部分组织成一个Augular框架可以理解的单元（5）

2017-11-09 11:23:11 418

原创 Angular4 第一章环境搭建

1.搭建环境 A. 安装nodejs,检测，npm -v B. 安装命令行工具angular-cli,检测 ng -v C. 创建新项目 ng new 项目名称, ng new first 生成新项目first，目录结构如下：first/src 项目原代码 first/src/app first/src/app/app.com

2017-11-09 11:04:42 235