Как динамически создавать/уничтожать модальные на основе div, нажатого (Angular2)

Question

Я хотел бы создать приложение, которое позволит вам щелкнуть по любому сгенерированному элементу и отобразить увеличенную версию. После загрузки, если вы нажмете большую версию на любую другую часть страницы, она должна закрыть.

В настоящее время;

Если модальный файл загружен, и вы нажмете его на другой миниатюре, он загрузит еще один модальный поверх предыдущего. Щелчок на пустое пространство ничего не делает.

Что бы я хотел;

Только один Модаль должен быть активным в любое время, если вы нажмете на него на любой другой части страницы, он закроет его.

Вот плунж;

http://plnkr.co/edit/Tt2FD12fGC6gIDfC3cQJ?p=preview

Я новичок в Angular2 (И никогда не использовал ничего ранее сходное с ним), так что я немного потерял и был бы признателен за любую помощь!

---

Ниже приведены некоторые фрагменты кода;

вид списку компонент (данные нагрузки)

import { Component, OnInit,Output } from "@angular/core"; 
import { Item } from './item.model'; 


@Component({ 
    selector: 'my-view-list', 
    template: ` 
    <div class="container"> 
     <my-item *ngFor="let item of items" [item]="item"></my-item> 
    </div> 
    ` 
}) 
export class ViewList implements OnInit { 

    items: Item[] = [ 
     new Item("test1", "http://www.thechromesource.com/wp-content/uploads/2011/07/New-Chrome-Icon-300x300.png"), 
     new Item("test2", "http://www.pandasecurity.com/mediacenter/src/uploads/2010/03/safari-300x300.jpg"), 
     new Item("test3", "http://cdn.toptenreviews.com/rev/prod/ce/535-firefox-box.jpg"), 
     new Item("test4", "http://www.darvu.com/wp-content/uploads/2014/08/IE-300x300.png?f1c57f") 
    ] 

} 

вид-grid.component (наборы элемент в сетке)

import { Component, Input, Output, EventEmitter} from "@angular/core"; 
import { Item } from './item.model'; 

@Component({ 
    selector: 'my-item', 
    template: ` 
     <div (click)="modalActive()" class="thumbnail"> 
      <img class="thumbImg" [src]="item.image" /> 
      <p> {{ item.name }} </p> 
     </div> 
     <modal *ngIf="show" [item]="item"></modal> 
    ` 
}) 
export class ViewGrid { 
    @Input() item: Item; 


    public show: boolean = false; 

    modalActive() { 
      console.log(this) 
      this.show = !this.show; 
    } 
} 

вид-modal.component (содержит/всплывающее окно модальное)

import { Component, OnInit, Input } from "@angular/core"; 
import { Item } from './item.model'; 


@Component({ 
    selector: 'modal', 
    template: ` 
    <div class="modal"> 
       <img class="modalImg" [src]="item.image" /> 
      </div> 
    ` 
}) 
export class ViewModal { 

    @Input() item: Item; 

} 

Answer 1

Для одного в то время, модальности, это звучит, как вам нужна директива NgSwitch (https://angular.io/docs/ts/latest/api/common/index/NgSwitch-directive.html). Другой вариант - хранить модалы в массиве и отображать их, выбирая их каждый раз, когда последний закрыт, пока не будет доступно больше.

Чтобы закрыть окно, вам необходимо применить элемент полностраничной страницы позади вашего модального объекта с действием (click)="closeFunc()".