Question

我想在弹出窗口中设置一个输入框和一个按钮。当我点击按钮使弹出窗口出现时，它工作并显示输入框和按钮。然后弹出窗口内的按钮意味着关闭它，这是有效的。问题是我第二次这样做时输入框和按钮没有出现。

<button
      class="btn btn-primary btn-lg"
      id="firstNameError">First Name</button>

<div id="firstNameErrorPop" class="hide">
      <input type="text"
           class="form-control"
           name="firstNameErrorPop"
           #firstNameErrorPop="ngModel"
           [(ngModel)]="test"/>

           <button class="btn btn-primary maxWidth" (click)="closePopOver('firstNameError')">Save and close</button>
</div>

我的方法看起来像这样

ngOnInit(){
   jQuery("#firstNameError").popover({
        placement: 'bottom',
        html: 'true',
        title : 'Type note below',
        content: function(){
            return jQuery('#firstNameErrorPop').removeClass('hide');
        }
    }).on('click', function(){
        //jQuery('#firstNameErrorPop').removeClass('hide');
        jQuery("#firstNameError").popover('toggle');
    });
}

closePopOver(element){
    console.log(element);
    //jQuery('#'+element+'Pop').addClass('hide');
    jQuery('#'+element).popover('hide');
}

Answer 1

实现角度方式：

<button (click)="showPopover = !showPopover" class="btn">Open</button>

<div *ngIf="showPopover" class="popOver">
  <input type="text">
  <button (click)="showPopover = false" class="btn">Close</button>
</div>

<div *ngIf="showPopover"  class="modal" (click)="showPopover = false"></div>

在组件类中：

showPopover= false;

你的CSS中的

.modal {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
}

.popOver {
  z-index: 1000;
  position: fixed;
  right: 0;
  left: 0;
  top: 20px;
  margin-right: auto;
  margin-left: auto;
  min-height: 200px;
  width: 90%;
  max-width: 520px;
  background-color: #fff;
  padding: 12px;
}

并显示带有动画的popover，将其添加到组件装饰器中：

  animations: [
        trigger('popover', [
          transition('void => *', [
            style({ transform: 'scale3d(.3, .3, .3)' }),
            animate(100)
          ]),
          transition('* => void', [
            animate(100, style({ transform: 'scale3d(.0, .0, .0)' }))
          ])
        ])
      ]

并且不要忘记导入：

import { trigger, state, style, animate, transition } from '@angular/animations';

使用它：

<div  [@popover] *ngIf="showPopover" class="popOver">

Angular 2 Popover

1 个答案: