在使用ngFor时丢失事件的原因是什么?

时间:2018-03-07 10:15:53

标签: angular primeng

在我的应用程序中,我使用灯箱样式组件。我玩PrimeNg并遇到一个问题,即点击事件不会被触发或者没有到达我的事件处理程序。

如果我按以下方式创建相关链接,则不会捕获任何事件。

<a *ngFor="let image of images; let i = index" 
    [href]="image.source" (click)="onImageClick($event,image,i,content)">
    <img [src]="image.thumbnail" [title]="image.title" [alt]="image.alt">
</a>

如果我创建没有循环的链接,那么事件处理按预期工作。

<a [href]="images[0].source" (click)="onImageClick($event,images[0],0,content)">
    <img [src]="images[0].thumbnail" [title]="images[0].title" 
       [alt]="images[0].alt">
</a> 

示例代码使用ng-container标记注入另一个组件。没有注射它似乎没有任何问题。

目的地模板......

<!-- that's the injection in the dest template -->
<ng-container *ngTemplateOutlet="selectedFeatureInfoTemplate">
</ng-container>

将模板传递到目标的函数定义如下:

// the template is passed by this attribute
featureInfoTemplate?: (feature: Feature) => any;

在源组件中,要注入的模板就像这样定义

<ng-template #infoView>
        <sw-map-lightbox [images]="selectedFeatureImages">
        </sw-map-lightbox>
</ng-template>

...并且源模板以这种方式将其传递到目的地

 // declaration to the member that holds access to the
 // template fragment in source component
 @ViewChild('infoView')
 private infoViewTpl: TemplateRef<any>;
 ...
 // the attribute that contains the the template ...
 vl.featureInfoTemplate = (feature: Feature): any => {
    return this.infoViewTpl;
  };
 ...

0 个答案:

没有答案