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

Question

我有一个由 a 组成的组件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>

演示

ng-container Angular 是一个分组元素，它不会干扰样式或布局，因为 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 文档

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属性和点击处理程序与组件的绑定。