自学ng2 -侦探指令spy

@Directive({selector: '[mySpy]'})
export class SpyDirective implements OnInit, OnDestroy {

  constructor(private logger: LoggerService) { }

  ngOnInit()    { this.logIt(`onInit`); }

  ngOnDestroy() { this.logIt(`onDestroy`); }

  private logIt(msg: string) {
    this.logger.log(`Spy #${nextId++} ${msg}`);
  }
}

我们可以把这个侦探指令写到任何原生元素或组件元素上，它将与所在的组件同时初始化和销毁。

<div *ngFor="let hero of heroes" mySpy class="heroes"> {{hero}} </div>

ngOnChanges

　　-- 在ngOnInit之前调用，只后还会调用ngOnChanges()很多次

　　-- 一旦检测到该组件的@Input属性发生了变化，Angular就会调用它的ngOnChanges()方法。

ngOnChanges(changes: SimpleChanges) {
  for (let propName in changes) {
    let chng = changes[propName];
    let cur  = JSON.stringify(chng.currentValue);
    let prev = JSON.stringify(chng.previousValue);
    this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);
  }
}

Angular不会关注对象属性的变化，因为对象的引用没有发生变化。

ngDoCheck()

　　-- 对ngOnChanges的拓展，可以检测到ng忽略的变更。　　

使用ngOnInit

　　-- 在构造函数之后马上执行复杂的初始化逻辑

　　-- 在ng设置完输入属性之后，对该组件进行准备

　　-- 只执行一次　

OnDestory()钩子

　　-- 一些清理逻辑必须在Angular销毁指令之前运行，把它们放在ngOnDestroy()中

AfterView钩子

　　-- AfterViewInint()和AfterChecked()钩子，ng在每次创建组件的子视图(组件)后调用它们。

　　　只能通过带@ViewChild装饰器的属性来访问子视图

@ViewChild(ChildViewComponent) viewChild: ChildViewComponent;
//访问子组件的属性
let c = this.viewChild.hero.length > 10 ? `That's a long name` : '';

AfterContent钩子

　　内容投影(感觉像是vue的solt)

　　下列迹象表明存在着内容投影：

　　　　-- 在组件的元素标签中有HTML

　　　　-- 组件的模板中出现了<ng-content>标签　　

//父组件里套子组件
　　`<after-content> <app-child></app-child> </after-content>`
//父模板里需要用到ng-content
　　template: `
  　　<div>-- projected content begins --</div>
    　　<ng-content></ng-content>
  　　<div>-- projected content ends --</div>`

AfterContent钩子和AfterView相似。关键的不同点是子组件的类型不同。

　　AfterView钩子所关心的是ViewChildren，这些子组件的元素标签会出现在该组件的模板里。

　　AfterContent钩子所关心的是ContentChildren，这些子组件被Angular投影进该组件中。

　　下列AfterContent钩子基于子级内容中值的变化而采取相应的行动，这里我们只能通过带　　

　　有@ContentChild装饰器的属性来查询到“子级内容”。

　　该组件的doSomething()方法立即更新了组件被绑定的comment属性。 它不用等下一回合。

　　回忆一下，Angular在每次调用AfterView钩子之前也会同时调用AfterContent。 Angular在完

　　成当前组件的视图合成之前，就已经完成了被投影内容的合成。 所以我们仍然有机会去修改

　　那个视图。