angular - 如何根据单击的 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")
    ]

}

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

view-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()" 操作在模态后面应用整页元素。