Question

如何仅在执行功能或特定点击时显示元素？在我的情况下，这是我的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，但似乎无法正常工作。我想在点击标记时显示它，当点击外面（屏幕上的某个地方）时，它必须再次关闭。

这里有一个羽毛link

Answer 1

您可以将*ngIf表达式绑定到您在点击时切换的布尔属性。

(markerClick)="updateDiv()"
<section *ngIf="isClicked" id="ethiopian-desert">TEST</section>

在你的App类中

updateDiv() {
    this.isClicked = true;
}

请参阅plunkr。

要隐藏div，只需使用其他点击事件从顶级元素重新切换this.isClicked布尔属性：

<sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" (click)="hideDiv()">

应用：

hideDiv() {
    this.isClicked = false;
}

Answer 2

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

在您的模板中：

  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;
  }

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

执行功能或单击时角度2 ngIf

2 个答案: