Angular 2、使用Jquery来操作Bootstrap

Question

我是 NG2 的新手，我正在尝试添加幻灯片 Up/Down 默认效果 Bootstrap 4 下拉组件。

Bootstrap 下拉组件有 2 Jquery 个侦听器 $(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');
     });
  }
}

虽然没有触发错误，但没有任何效果:/。但！！！在调试器点，当浏览器被冻结时，如果我 copy/paste 控制台上的代码，它确实有效。所以我真的很沮丧，因为我很确定我的代码是正确的，但我不明白为什么它在代码定义中不起作用。

PS：我尝试将其包装在 setTimeout 上以查看它是否是 DOM 渲染问题，但也没有用。我也尝试了所有 NG2 Lifehooks。

如果有人能帮我解决这个问题，并向我解释为什么会出现这种奇怪的行为，我将不胜感激。

规格：

Bootstrap4，Angular4.3，JQuery3.2.1

Answer 1

天呐！

我想 import * as $ from 'jquery'; 而 app.module.ts 不在指令中。

即使在那里，仍然很奇怪，我认为在 module.ts 或我的 directive.ts 上导入 jquery 应该不是问题。无论如何，我当时应该能够使用用户 $ 方法。

Angular 2、使用Jquery来操作Bootstrap

Angular 2, Using Jquery to Manipulate Bootstrap

jquery

twitter-bootstrap

angularjs

angular2-directives