在Angular 4-5中,*ngFor中的自定义指令有时候可能不起作用。这个问题通常是由于Angular的变更检测机制导致的。
解决这个问题的方法有两种:
使用trackBy函数: 在*ngFor中,可以使用trackBy函数来指定一个唯一的标识符,以便Angular可以正确地跟踪和更新列表项。在自定义指令中,你可以在ngOnChanges生命周期钩子中使用trackBy函数来检测变化。
例子:
@Directive({
selector: '[customDirective]'
})
export class CustomDirective implements OnChanges {
@Input() items: any[];
ngOnChanges(): void {
console.log('CustomDirective: ngOnChanges');
}
trackByFn(index: number, item: any): any {
return item.id; // 假设items中的每个对象都有一个唯一的id属性
}
}
在模板中使用这个自定义指令:
{{item.name}}
使用ChangeDetectorRef手动触发变更检测: 在自定义指令中,可以注入ChangeDetectorRef来手动触发变更检测。这样可以确保自定义指令中的变化被正确地检测和更新。
例子:
import { Directive, Input, OnChanges, ChangeDetectorRef } from '@angular/core';
@Directive({
selector: '[customDirective]'
})
export class CustomDirective implements OnChanges {
@Input() items: any[];
constructor(private cdr: ChangeDetectorRef) {}
ngOnChanges(): void {
console.log('CustomDirective: ngOnChanges');
this.cdr.detectChanges();
}
}
在模板中使用这个自定义指令:
{{item.name}}
这些方法可以解决*ngFor中自定义指令不起作用的问题,并确保自定义指令中的变化被正确地检测和更新。