Angular 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, но, кажется, не работает. Я хочу показать его, когда маркер щелкнут, и когда он щелкнут снаружи (где-то на экране), он должен снова закрыться.

Здесь 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

Вы можете связать ваше выражение *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()"> 

App:

hideDiv() { 
    this.isClicked = false; 
}