有没有办法将点击绑定到 ng 容器?

Question

我有一个由ng-container组成的组件，我想绑定一个点击。 (click)不做这项工作。

有没有其他方法可以做到这一点？

Answer 1

实际上，代码中的@HostListener('click', ['$event'])可以完成这项工作。

问这个问题让我想到了它。

Answer 2

ng-container不会呈现为元素，因此无法引发点击事件

@Directive({
  selector: '[appClickHandler]'
})
export class ClickHandlerDirective {
   @HostListener('click', ['$event']) log(e){
    console.log(e)
  }
}

这不会引发任何点击事件

<ng-container appClickHandler>
  <div>
    ng container  with click 
  </div>
</ng-container>

但是您可以将单击处理程序添加到 ng 容器内的元素中

<ng-container >
  <div appClickHandler>
    ng container  with click 
  </div>
</ng-container>

演示 🚀

ng-containerAngular 是一个分组元素，不会干扰样式或布局，因为 Angular 不会将其放在 DOM 中。

这里又是条件段落，这次使用 .

<p>
  I turned the corner
  <ng-container *ngIf="hero">
    and saw {{hero.name}}. I waved
  </ng-container>
  and continued on my way.
</p>

NG-continer doc

Answer 3

在 NG v11 中测试，您可以在希望插入自定义模板的地方执行以下操作：

<ul>
    <li *ngFor="let item of listData; index as i">
        <ng-container
            [ngTemplateOutlet]="customTemplate"
            [ngTemplateOutletContext]="{
                $implicit: item,
                idx: i,
                onclick: this.clickHandlerMethodInComponent.bind(this)
            }"
        ></ng-container>
    </li>
</ul>

然后像这样定义自定义模板：

<ng-template #customTemplate
    let-item
    let-index="idx"
    let-onclick="onclick">
    <a (click)="onclick(item)">
        <p>{{item.description}}</p>
    </a>
</ng-template>

关键是使用 ngTemplateOutletContext 属性和单击处理程序与组件的绑定。