Typescript для вызова функции ngx-bootstrap

Я пытаюсь связать свой машинописный текст с методом скрытия из ngx-bootstrap в моем проекте я запускаю несколько функций, и все они закрываются, когда пользователь нажмет кнопку x во всплывающем окне, myfunction() в машинописном сценарии запустится и вызовет метод скрытия pop2.hide().

<div>
  <ng-template #popoverContent3>
    <div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
      <p>Fun with ngx-bootstrap
              <button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
      </p>
    </div>
    <div>
     <p>Trying to make typescript call the function pop2.hide()</p>  
    </div>
  </ng-template>
  <br><br><br><br><br><br><br>
  <a  [popover]="popoverContent3" #pop2="bs-popover" (click)="isOpen = !isOpen" [outsideClick]="false"  placement="right">
 Make typescript call the function pop2.hide()
    </a>
</div>

Это код из plunker, кнопка x.

<button type="button" (click)='pop2.hide()' class="close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
</button>
And from my typescript, I need my method to work.

  myfunction(){
    pop2.hide();//needs to work!
  }


typescript frontend angular ngx-bootstrap angular5
person GoodJeans    schedule 06.03.2018    source источник
comment
Вам удалось сделать эту работу? У меня сейчас такая же проблема.   -  person bananaCute    schedule 03.01.2019
comment
@bananaCute да можете прочитать комментарии ниже   -  person GoodJeans    schedule 03.01.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете получить доступ к эталонной переменной шаблона в своем классе.

Ваш HTML

<body>
  <div>
    <ng-template #popoverContent3>
      <div style="font-size:18px; font-family:'Times New Roman'; font-weight:bold;">
        <p>Fun with ngx-bootstrap
          <button type="button" (click)='myfunction()' class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </p>
      </div>
      <div>
        <p>Trying to make typescript call the function pop2.hide()</p>
      </div>
    </ng-template>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <a [popover]="popoverContent3" #pop2="bs-popover" (click)="isOpen = !isOpen" [outsideClick]="false" placement="right">
 Make typescript call the function pop2.hide()
    </a>
  </div>


</body>

Смотрите, я добавил myFunction в качестве обработчика нажатия на кнопку закрытия. и в компоненте

import { Component, ViewChildren, QueryList, AfterViewInit,ViewChild } from '@angular/core';
import { PopoverDirective } from 'ngx-bootstrap';
@Component({
  selector: 'ngx-app',
  templateUrl: 'app.component.html',
  styles:[`



  ]

  `
})
export class AppComponent implements AfterViewInit{
  @ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;
    @ViewChild('pop2') pop2: ElementRef; //this is change


  ngAfterViewInit() {
    this.popovers.forEach((popover: PopoverDirective) => {
      popover.onShown.subscribe(() => {
        this.popovers
        .filter(p => p !== popover)
        .forEach(p => p.hide());
      });
    });
  }
  myfunction(){
    this.pop2.hide();//working
  }


}

рабочий plunkr

person user1608841    schedule 06.03.2018