関数またはクリックが実行されたときの角度2 ngIf

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と同じように試しましたが、うまくいかないようです。私は、マーカーがクリックされたときにそれを表示したいと思っていました。そして、もう一度閉じる必要がありました。ここで

あなたはクリックで切り替えるブール型プロパティにご*ngIf式をバインドすることができplunker link

Answer 1

を作成および更新する必要があります状態と状態値に関連してセクションを表示または非表示にします。
マーカーをクリックしてマップをクリックしたときにマーカーを隠すと、そのセクションを表示するサンプルを作成しました。テンプレートで

：あなたのコンポーネントで

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

Answer 2

。

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

、アプリのクラスで

updateDiv() { 
    this.isClicked = true; 
} 

plunkrを参照してください。

のdivを非表示にするには、単に別のクリックイベントでトップレベルの要素からthis.isClickedブールプロパティを再切り替える：

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

のアプリを起動する：

hideDiv() { 
    this.isClicked = false; 
}