时间戳

首页 > 解决方案 > 如何编写一个与子组件具有相同标签的瘦包装器组件

angular - 如何编写一个与子组件具有相同标签的瘦包装器组件

问题描述

我将在下面使用一个人为的例子来描述我（有点）想要完成的事情。

假设我想在渲染或删除 Angular Material2 进度微调器时将某些内容记录到控制台。

包装：

@Component({
  selector: 'mat-spinner',
  template: '<mat-spinner></mat-spinner>' // This would be the OTHER mat-spinner
})
export class LoggingSpinnerComponent() implements OnInit, OnDestroy {

  ngOnInit(): void {
    console.log("Spinner rendered");
  }

  ngOnDestroy(): void {
    console.log("Spinner destroyed");
  }

}

请注意，我使用mat-spinner了LoggingSpinnerComponent's 选择器，而且，我在它的模板中使用。 mat-spinner

显然这是行不通的。

有什么办法可以做到这一点？

我可以“命名空间”MaterialProgressSpinnerModule以便我可以使用<original-mat-spinner>这个外部组件模板中的东西吗？

背景。

我真正想做的是编写一个跟踪器，记录用户在野外看到微调器的时间。而且，我将制作一个仪表板来突出显示我的应用程序的哪些部分正在遭受过多的微调器时间（这不一定与一个特定 API 的性能相关，因此我对这个包装器很感兴趣）。

我想使用具有相同选择器（mat-spinner）的包装器的原因是我可以换掉MatProgressSpinnerModule并使用LoggingSpinnerModule它，而不必触摸任何代码。

LoggingSpinnerModule如果它被证明是一个失败的实验，它也将使将来更容易删除它。

标签： angularangular-material

解决方案

您实际上并不需要模板，因此您可以使用指令而不是组件：

@Directive({
  selector: 'mat-spinner'
})
export class LoggingSpinnerDirective implements OnInit, OnDestroy {

  ngOnInit(): void {
    console.log("Spinner rendered");
  }

  ngOnDestroy(): void {
    console.log("Spinner destroyed");
  }

}

推荐阅读