将事件监听器添加到 *ngTemplateOutlet 或 ng-template 的内容中

Question

我需要向 ang-template或 的内容添加一个事件侦听器*ngTemplateOutlet，但不知道内容可能是什么。它可以是一个按钮或一些自定义组件。

我尝试访问elementRef但它不起作用，因为它是一个评论节点。

当我添加TemplateRefvia时ViewContainerRef.createEmbeddedView，我找不到对所添加视图的元素引用的任何访问权限。

@ViewChild("foo")我尝试的另一种方法是通过我的组件并使用模板出口来访问它。没有成功。

<ng-container #foo *ngTemplateOutlet="foo"></ng-container>

有没有人有什么建议？

编辑：

我有一个组件，我希望消费者可以选择以与Material Stepper处理自定义图标相同的方式提供一些子组件。

<mat-vertical-stepper>
  <ng-template matStepperIcon="edit">
    <custom-icon>edit</custom-icon>
  </ng-template>
  <ng-template matStepperIcon="done">
    <custom-icon>done</custom-icon>
  </ng-template>
</mat-vertical-stepper>

看这个示例，我需要访问<custom-icon>并向其添加事件处理程序，但实际上并不知道它是一个<custom-icon>.

Answer 1

创建一个属性指令并向其中添加@HostListener。这是一个例子

import { Directive, ElementRef, OnInit, Renderer2, HostListener, HostBinding, Input } from "@angular/core";

@Directive({
  selector: '[appHighLight]'
})
export class HighLightDirective implements OnInit {

  @Input() defaultColor: string ='transparent';
  @Input() highLightColor: string ='blue';
  @HostBinding('style.backgroundColor') backgroundColor: string;
  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  ngOnInit(){      
      this.backgroundColor = this.defaultColor;     
    }

    @HostListener('mouseenter') mouseIn(eventData : Event){      
      this.backgroundColor = this.highLightColor;
    }

     @HostListener('mouseleave') mouseOut(eventData : Event){    
      this.backgroundColor = this.defaultColor;     
    }
}