Angular 2 ngIf执行功能或单击时

Sireini 发表于 Dev

塞雷尼

仅在执行功能或特定单击时如何显示元素？就我而言，这是我的html标记：

<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [mapTypeId]="maptype" [mapTypeControlOptions]="mapTypeControlOptions">
    <sebm-google-image-map-type [mapLayerId]="'linz'" [options]=imageMapOptions>
        <sebm-google-map-marker *ngFor="#location of locations" [latitude]="location.lat" [longitude]="location.lng" [label]="location.id" (markerClick)="updateDiv()">
            <sebm-google-map-info-window [disableAutoPan]="true"> {{ location.id }} <strong>{{ location.content }}</strong></sebm-google-map-info-window>
        </sebm-google-map-marker>
    </sebm-google-image-map-type>
</sebm-google-map>


<section  *ngIf="markerClick==true" id="ethiopian-desert">TEST</section>

如您所见，我用markerClick尝试了一下，但似乎不起作用。我想在单击标记时显示它，并且在外部（在屏幕上的某个地方）单击时必须再次关闭它。

这里是一个链接

蒂布斯

您需要创建和更新状态，并且关于状态值，您将显示或隐藏该部分。
我创建了一个示例，该示例将在您单击标记时显示该部分，并在您单击地图时将其隐藏。

在您的模板中：

  template: `
  <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" (click)="hideSection($event)">
    <sebm-google-image-map-type [mapLayerId]="'linz'" [options]=imageMapOptions>
        <sebm-google-map-marker *ngFor="#location of locations" [latitude]="location.lat" [longitude]="location.lng" [label]="location.id" (markerClick)="showSection()">
            <sebm-google-map-info-window [disableAutoPan]="true"> {{ location.id }} <strong>{{ location.content }}</strong></sebm-google-map-info-window>
        </sebm-google-map-marker>
    </sebm-google-image-map-type>
</sebm-google-map>

  <section *ngIf="shouldDisplaySection" id="ethiopian-desert">TEST</section>
`

在您的组件中：

  hideSection($event) {
    // stop event propagation on children
    $event.stopPropagation();

    this.shouldDisplaySection = false;
  }

  showSection() {
    this.shouldDisplaySection = true;
  }

更新插件：http ://plnkr.co/edit/baF1WH1Dxp4eBAGpyHK6?p=preview

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。