コンポーネントのjQueryメソッドの呼び出し方法

Question

自分のコンポーネントでjQueryメソッドを呼び出そうとしますが、HTMLレンダリング後にこのメソッドを呼び出すことはできません。私はこの方法で試していました：

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 
    } 
} 

しかし、HTMLレンダリング後に実行されるメソッドだけがngAfterViewCheckedです。それは何度も呼ばれていますが、私はそれを1回だけ呼び出さなければなりません。どうしたらいいですか？

Answer 1

私はあなたのコンポーネント

コンストラクタ（プライベートelementRef ElementRefにそれを注入角度/コア

@から

1. 輸入ElementRef

   インポート{ElementRef}にお勧めしたいです）{}

2. 内部ngOnInit

   let element = $（this.elementRef.nativeElement）.find（ '＃def'）;

私は試してみませんでしたが、試してみてください！