Wie jQuery-Methode in der Komponente aufrufen?

Question

Ich versuche jQuery-Methode in meiner eigenen Komponente aufrufen, aber ich kann diese Methode nicht nach HTML-Rendering aufrufen. Ich war auf diese Weise versuchen:

declare var $: any; 

@Component({ 
    selector: 'some-component', 
    template: ` 
     <div *ngFor="let id of fieldIds" class="form-field"> 
      <input type="text" id="{{id}}" class="form-control"/> 
     </div> 
    ` 
}) 
export class SomeComponent implements OnInit, AfterViewInit, AfterViewChecked { 

    fieldIds: string[] = ['abc', 'def', 'ghi']; 

    constructor() {} 

    ngOnInit(): void { 
     console.log($("#def")); 
     //is undefined 
    } 

    ngAfterViewInit(): void { 
     console.log($("#def")); 
     //is undefined 
    } 

    ngAfterViewChecked(): void { 
     console.log($("#def")); 
     //exist, but method is called too many times 
    } 
} 

Aber nur Verfahren, die nach dem HTML-Rendering auszuführen ist ngAfterViewChecked. Es hat viele Male angerufen, aber ich muss es nur einmal nennen. Wie kann ich das machen?

Answer 1

Ich würde vorschlagen, zu

1. Import ElementRef

   Import {ElementRef} von @ Winkel/Kern

2. es

   Konstruktor (privat ElementRef ElementRef Ihrer Komponente injizieren) {}

3. Inside ngOnInit

   let Element = $ (this.elementRef.nativeElement) .find ('# def');

Ich habe es nicht getestet, aber versuchen Sie es!