Setzen Sie den Fokus auf die Eingabe von ngbootstrap popover

Question

Ich benutze ein ng-Bootstrap-Popover, um eine Tabelle zu filtern. Basierend auf dem Typ (int, string, date, ..) der Daten in der Spalte möchte ich verschiedene Arten von Filteroptionen zeigen. Dies funktioniert wie beabsichtigt, aber ich möchte auch, dass das entsprechende Eingabefeld fokussiert wird, wenn das Popover angezeigt wird.

ng-boostrap Popover macht eine Ausgabe namens (gezeigt), die ich versucht habe zu verwenden, um eine Funktion zum Fokussieren meiner Eingabe aufzurufen, dies scheint nicht zu funktionieren.

Wenn ich die gleiche Funktion von ngAfterViewChecked() aufrufen, konzentriert es sich wie beabsichtigt, aber da diese Funktion viele Male aufgerufen wird, scheint es keine sehr gute Lösung zu sein (auf meiner eigenen Seite heißt es etwa 150 mal pro Umschalten des Popover). Ich bin nicht sicher, warum es so oft genannt wird, aber das ist nicht der Hauptpunkt der Frage.

Ich habe eine Plunker geschaffen, das mein Problem zeigt: http://plnkr.co/edit/fr0nI1GiRT22UWXaNZwJ?p=preview

Html:

<div style="display:flex; align-items:center; justify-content:center"><button type="button" class="btn btn-outline-secondary" placement="bottom" 
     [ngbPopover]="popContent" popoverTitle="Popover on bottom" (shown)="selectInput()" container="body" triggers="manual" #p="ngbPopover" (click)="p.toggle()"> 
    Popover on bottom 
</button> 
</div> 

<ng-template #popContent> 
    <div class="filter-popover"> 
    <div> 
     <label for="filterbox">Filter: </label> 
     <input id="filterbox" [(ngModel)]="appliedFilter" class="form-control form-control-sm" [focus]="focusSettingEventEmitter" /> 
    </div> 
    <div class="popover__controls d-flex justify-content-end"> 
     <button class="btn btn-sm btn-success" (click)="p.close()">OK</button> 
     <button class="btn btn-sm btn-danger" (click)="p.close()">Cancel</button> 
    </div> 
    </div> 
</ng-template> 

Komponente:

import { Component, Input, Output, OnChanges, EventEmitter, HostListener, ViewChild, ViewChildren, AfterViewInit, AfterViewChecked } from '@angular/core'; 

@Component({ 
    selector: 'ngbd-popover-basic', 
    templateUrl: 'src/popover-basic.html' 
}) 
export class NgbdPopoverBasic implements AfterViewChecked { 
     public focusSettingEventEmitter = new EventEmitter<boolean>(); 

    selectInput() { 
     this.focusSettingEventEmitter.emit(true); 
    } 
    ngAfterViewChecked() { 
     //if i call it here it will focus it, but this function is run 150 times on my site (here around 3), so we dont want to do that 
     //this.selectInput(); 
     //console.log("checked") 
    } 
} 

Richtlinie:

import { Directive, Input, EventEmitter, ElementRef, Renderer, Inject } from '@angular/core'; 

@Directive({ 
    selector: '[focus]' 
}) 
export class FocusDirective { 
    @Input('focus') focusEvent: EventEmitter<boolean>; 

    constructor(@Inject(ElementRef) private element: ElementRef, private renderer: Renderer) { 
    } 

    ngOnInit() { 
     this.focusEvent.subscribe((event:any) => { 
      this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []); 
     }); 
    } 
} 

Aus was ich gelesen habe, was andere Benutzer über das Fokussieren von Eingaben sagen, ist, dass Sie dies in der Funktion AfterViewInit tun sollten, dies ist jedoch nicht auf mich anwendbar, da die Komponente beim Laden der Seite initialisiert wird und der Fokus einmal auftreten soll die popover wird/gezeigt angezeigt

Würde etwas Hilfe lieben mich

Answer 1

ich in die richtige Richtung weisen, sehen Sie einen Versuch gemacht haben AfterViewChecked zu verwenden. Es ist wahr, es wird 150 mal gefeuert werden, aber nicht, wenn Sie eine Bedingung festgelegt:

start; 

....  
ngAfterViewChecked() { 
    if(this.start){ 
    this.selectInput(); 
    console.log("checked"); 
    this.start = false; 
    } 
} 

und setzen Start tot nur dann, wenn die popover Makeln Schaltfläche geklickt wird:

<button ...(click)="start = true; p.toggle()"> 

Jetzt ist es überprüfen In der Demo-Konsole wird es nur bei Bedarf ausgelöst und der Fokus funktioniert.

DEMO