Как я могу написать тонкий компонент оболочки с тем же тегом, что и его дочерний

Question

Я буду использовать надуманный пример ниже, чтобы описать то, что я (вроде) пытаюсь выполнить.

Допустим, я хотел записать что-то на консоль, когда рендеринг или удаление счетчика прогресса 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, но я также использую mat-spinner внутри своего шаблона.

Очевидно, это не сработает.

Есть ли способ, которым я могу достичь этого?

Могу ли я "пространство имен" MaterialProgressSpinnerModule, чтобы я мог использовать что-то вроде <original-mat-spinner> в шаблоне этого внешнего компонента?

---

Background.

Что я действительно пытаюсь сделать, так это написать трекер, который хранит записи о том, как долго пользователи видят блесны в дикой природе.И я сделаю приборную панель, чтобы выделить, какие части моего приложения страдают от чрезмерного времени вращения (это не обязательно будет связано с производительностью одного конкретного API, отсюда мой интерес к этой оболочке).

Причина, по которой я хочу использовать оболочку с тем же селектором (mat-spinner), заключается в том, что я могу поменять MatProgressSpinnerModule и использовать вместо него LoggingSpinnerModule, не трогая код.

Было бы также легче удалить LoggingSpinnerModule в будущем, если это окажется неудачным экспериментом.

Answer 1

Вам не нужен шаблон, поэтому вы можете использовать директиву, а не компонент:

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

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

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

}