有什么方法可以将点击绑定到 ng-container 吗？

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-container 中的元素

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

demo

ng-container The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the 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 属性和点击处理程序到组件的绑定。

有什么方法可以将点击绑定到 ng-container 吗？

Is there some way to bind a click to a ng-container?

angular

ng-container