Angular2 ng2-popover hide() не работает

app.module.ts

import { PopoverModule } from 'ng2-popover';
@NgModule({
  declarations: [ ...],
  imports: [PopoverModule],
  providers: []
})

пример.html

<a [popover]="customPopover" [popoverOnHover]="true" [popoverCloseOnMouseOutside]="true" href="www.google.com" (click)="$event.stopPropagation()" target="_blank">{{name}}</a>
    <!--Popover content -->
    <popover-content #customPopover title="{{name}}" placement="right" 
      [closeOnClickOutside]="true" [closeOnMouseOutside]="true">
      <span class="popoverDesc">{{description}}</span><br /><br />
      <a href="{{websiteLink | formatUrl:'url'}}" (click)="$event.stopPropagation()" target="_blank">{{websiteLink | formatUrl:'text'}}</a><br /><br />
      <button class="btn btn-secondary popoverBtn" (click)="toggleAddToListModalPopover($event)">Add to list</button>
     </popover-content>

пример.component.ts

import { PopoverContent } from 'ng2-popover';

@ViewChild('customPopover') customPopover: PopoverContent;

protected toggleAddToListModalPopover(e):void {
  this.customPopover.hide();
  this.showAddToListModal = !this.showAddToListModal;
  e.stopPropagation();
}

Я хочу скрыть всплывающее окно при открытии модального окна. Когда я вызываю функцию customPopover.hide(), она выдает ошибку:

error_handler.js: 51 TypeError: невозможно прочитать свойство «скрыть» неопределенного

в PopoverContent.hide (PopoverContent.js:78)

В файле PopoverContent.js есть строка this.popover.hide(); но я понятия не имею, как его инициализировать. Насколько я понимаю, @ViewChild только инициализирует привязку класса к #customPopover, то есть в моем случае popover-content. Может ли кто-нибудь дать мне решение для инициализации «Popover»?


ionic-framework javascript angular angular2-routing ng2-bootstrap
person Hassan Kashif    schedule 25.09.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я думаю, что в вашем случае this.customPopover не определено.

Другой способ, которым вы можете скрыть свой всплывающий контент:

  <div>
    <popover-content #myPopover title="this header can be omitted" placement="right" [closeOnClickOutside]="true">
      <b>Very</b> <span style="color: #C21F39">Dynamic</span> <span style="color: #00b3ee">Reusable</span>
      <b><i><span style="color: #ffc520">Popover With</span></i></b> <small>Html support</small>. Click outside of this popover and it will be dismissed automatically.

      <u (click)="myPopover.hide()">Or click here to close it</u>.
    </popover-content>

    <button [popover]="myPopover">click this button to see a popover</button>
  </div>

Посмотрите, поможет ли это.

person Sanket    schedule 25.09.2016
comment
Спасибо @Sanket за подсказку. Да this.customPopover не определено. Я решил это, используя приведенный ниже код. - person Hassan Kashif; 25.09.2016

arrow_upward
2
arrow_downward

Я решил это, используя приведенный ниже код, т.е. добавил «customPopover» в качестве параметра в функцию и вызвал метод hide(). Я не знаю, хороший ли это способ решить эту проблему или нет?

пример.html

<button class="btn btn-secondary popoverBtn" (click)="toggleAddToListModalPopover(customPopover, $event)">Add to list</button>

пример.component.ts:

protected toggleAddToListModalPopover(customPopover, e):void {
    customPopover.hide();
    this.showAddToListModal = !this.showAddToListModal;
    e.stopPropagation();
}
person Hassan Kashif    schedule 25.09.2016