Question

我想创建一个应用程序，它允许您单击生成的任何项目并显示更大的版本。加载后，如果您点击较大的版本到页面的任何其他部分，它应该关闭。

目前;

如果加载了一个模态并将其单击到另一个缩略图上，它将在前一个模式上加载另一个模态。点击一个空白区域什么也没做。

我想要发生什么;

任何时候都只允许一个模态处于活动状态，如果你点击模态到页面的任何其他部分就会关闭它。

这是一个插件;

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

我是Angular2的新手（并且从未使用过类似的任何东西），所以我有点迷失了，不胜感激任何帮助！

以下是一些代码段;

view-list组件（加载数据）

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

如何基于div单击（Angular2）

1 个答案: