각도 2, Jscery를 사용하여 부트 스트랩 조작

Question

저는 NG2로 새롭고 기본 Slide Up/Down 효과를 추가하려고하는데 기본 Bootstrap 4 Dropdown 구성 요소를 추가하려고합니다.

부트 스트랩 드롭 다운 구성 요소에는 2 개의 Jquery Listener 인 $(el).on('show.bs.dropdown')과 $(el).on('hide.bs.dropdown')이 있습니다. 그래서이 효과를 추가하기위한 지침을 만들어 : 오류가 따라 트리거되지

import { Directive, OnInit, AfterViewChecked, ElementRef, Input } from '@angular/core'; 
import * as $ from 'jquery'; 

@Directive({ 
    selector: '[appDropDownAnimate]' 
}) 
export class DropDownAnimateDirective implements AfterViewChecked { 
    @Input() 
    appDropDownAnimate: boolean; 

    private el = this.ElementRef.nativeElement; 
    constructor(private ElementRef: ElementRef) { 
    } 

    ngAfterViewChecked() { 
    const el = this.el; 
     debugger; 
     $(el).on('show.bs.dropdown', 
     (cb) => { 
     $(el).find('.dropdown-menu').first().stop(true, true).slideDown('fast'); 
     }); 
    $(el).on('hide.bs.dropdown', 
    (cb) => { 
     $(el).find('.dropdown-menu').first().stop(true, true).slideUp('fast'); 
    }); 
    } 
} 

있지만 효과가 없습니다 : /합니다. 그러나!!! 디버거 지점에서 브라우저가 고정되어있는 동안 콘솔에 코드를 복사/붙여 넣으면 작동합니다. 따라서 코드가 옳다는 것이 확실하기 때문에 실제로 좌절감을 느낍니다.하지만 코드 정의 내에서 작동하지 않는 이유를 알 수 없습니다.

추신 : DOM 렌더링 문제인지 확인하기 위해 setTimeout에 포장하려고 시도했지만 작동하지 않았습니다. 나는 또한 모든 NG2 Lifehooks를 시도했다.

누구든지이 문제를 해결하는 데 도움이 될 수 있으며이 이상한 행동의 이유를 나에게 설명하면 매우 감사하게 생각합니다.

SPECS :

부트 스트랩 4, 각도 4.3, JQuery와 3.2.1

Answer 1

오 하나님!

나는 import * as $ from 'jquery';이고 app.module.ts는 지시어에 없다고 가정했습니다.

심지어 이상하게도, module.ts 또는 내 directive.ts에서 jquery를 가져 오는 것이 내가 생각하는 문제가 아니어야합니다. 나는 어쨌든 그 시점에서 사용자 $ 메소드를 사용할 수 있다고 가정했다.