5. 测试用例定义的[id]变量，在组件的ngOnInit()生命周期钩子拿不到

解决方法：在ngAfterViewInit()生命周期钩子可以拿到。
用户写宿主id三种方式：
1）给HTML属性id赋字符串

<!-- 赋字符串 -->
<input id='mycheckbox' />
<!-- 赋变量 -->
<input id='{{myId}}'/>

2）给HTML属性id赋变量

<input [attr.id]='mycheckboxid'/>

3）给DOM属性id赋变量

<input [id]='mycheckboxid'/>

组件开发读写宿主id的三种方法：
1）读HTML属性id（左右/上下滑动可查看全部代码）

constructor(@Attribute('id') public hostId ) {}

2）写HTML属性id

@HostBinding('attr.id') hostId: string;
写DOM属性id
@HostBinding('id') hostId: string;

3）读写DOM属性id（左右/上下滑动可查看全部代码）

constructor(private hostRef: ElementRef ) { }
ngAfterViewInit() {  
   const id =  this.hostRef.nativeElement.id
}

6. 函数作为入参时候，函数尽量写成箭头函数形式

组件开发过程过需要修改或者读取组件属性或者方法时候，一定要写成箭头函数形式，不然会出现this指向问题。
比较常见的2种应用。
1）定时器：（左右/上下滑动可查看全部代码）
let timer = setInterval(() => {
startDist += motion.step * dir;
topy+= motion.step * dir;
if (Math.abs(startDist - startPoint)>= motion.distance) {
clearInterval(timer);
timer = null;
}
}, 1);

2）事件监听：（左右/上下滑动可查看全部代码）
document.addEventListener(‘mousemove’, this.mouseMoveHandlerFn);
private mouseMoveHandlerFn = ($event) => {
const option = this.config.options;
}

7. 组件通讯之子获取父的实例

应用场景：组件嵌套，子组件需要用到父组件的属性和方法。
组件嵌套形式如下面代码：
父组件的模板代码如下，父组件嵌套了子组件app-child。
（左右/上下滑动可查看全部代码）

<div class="container">
   <div *ngFor="let item in items">
     <app-child [item]="item"></app-child> 
  </div>
</div>

方案：在constructor(构造函数)中使用@Inject()依赖注入父组件。
如下面代码：

export class TiBtnItemComponent {
 constructor(
   @Inject(TiBtnRadioCompontent) private btnRadio: TiBtnRadioCompontent
 ) {}
}

并且上面的方式是单例的（父组件下不管有几个子组件，父组件只实例化一次），但是这种方式只能注入一个组件实例。
在实际开发中，例如选择按钮组有多选按钮和单选按钮，这个时候就需要注入多个父组件。用上面同样的方式同时注入2个就会报如下错误：

原因如下：
当组件申请一个依赖时，Angular从该组件本身的注入器开始，沿着依赖注入器的树往上找，直到找到第一个符合要求的提供商。如果找不到就会抛出一个错误。

解决方案：
在@Inject()装饰前加@Optional(),如下面代码：
（左右/上下滑动可查看全部代码）

export class TiBtnItemComponent {
 constructor(
  @Optional()@Inject(TiBtnRadioCompontent) private btnRadio: TiBtnRadioCompontent,
    @Optional() @Inject(TiBtnCheckboxCompontent) private btnRadio:TiBtnCheckboxCompontent    
 ) {}
}

解决原因：
当Angular找不到依赖时，@Optional装饰器会告诉Angular继续执行，Angualr会把此注入参数设置为null（而不是默认的抛出错误的行为）。

8. 组件生命周期总结

如上图，为组件初始化各个生命周期执行顺序。其中紫色的生命周期只在组件初始化执行一次，绿色的会执行多次。

1）ngOnChanges频率较低，仅监听用户对@Input变量的改变。注意：监听不到组件开发者在代码中对变量更改。可以考虑使用@Input set访问器方式，监听变量，所有改变都可以监听到。

2）ngDoCheck，触发频率超高。angular自身监视[ngclass]数组变化，是放在这个生命周期。使用了IterableDiffers机制。其他什么情况适合放在这里，暂时不太清楚。

3）ngAfterContentChecked，ngAfterViewChecked相对频率低。我们目前代码监听Dom属性变化，暂时放在这里了。不知道有没有更好办法监听Dom属性变化。

注意：如果在ngAfterViewChecked里面，改变了模板中使用的变量，此变量不一定能及时更新到试图。需要强制刷新this.changeDetectorRef.detectChanges();

4）想监听数组和对象属性变化，angular内部使用了IterableDiffers和KeyValueDiffer。参考[ngClass]源码。

本转载自 Think体验设计公众号。

原文链接：https://mp.weixin.qq.com/s/4bfahysRdH9pVST_UZ4cXg

创作场景

这里有本 Angular 修炼秘籍送你（三）