Question

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

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

当我通过TemplateRef添加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

here中描述的方法对您有用吗？它需要ng-template的内容来引用事件发射器，所以我不知道它是否适合您的用例...

Answer 2

创建属性指令并向其添加@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;     
    }
}

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

2 个答案: