创建一个指令来监视角度生命周期钩子答案

【问题标题】：Creating an directive to spy angular life cycle hooks创建一个指令来监视角度生命周期钩子
【发布时间】：2020-01-26 22:15:43
【问题描述】：

是否有一个指令来检测每个生命周期钩子，如 ngOnDestroy() 并在组件被销毁之前实现一些垃圾收集器？

我想这样做是为了避免组件让某些东西运行并导致内存泄漏

【问题讨论】：

标签： angular directive spy angular-lifecycle-hooks

【解决方案1】：

我认为有两种选择

<app-mycomp cleanup></app-mycomp>

1) 指令知道它的宿主组件。所以你可以将主机注入到构造函数中

...
constructor(private host: MycompComponent) { }
...

2) 如果指令不知道主机。这个有点复杂宿主组件需要自己提供

@Component({
  selector: 'app-mycomp',
  templateUrl: './mycomp.component.html',
  styleUrls: ['./mycomp.component.css'],
  providers: [{  
    provide: 'cleanable', 
    useExisting: forwardRef(()=> MycompComponent)
  }]
})
export class MycompComponent extends Cleanable implements OnInit { ... }

现在你也可以在指令中注入它

constructor(@Inject('cleanable') private host: Cleanable) { ... }

最后，您可以在指令中定义生命周期钩子。

Here is a stackblitz

【讨论】：