Angular 2，使用 Jquery 操作引导程序答案

【问题标题】：Angular 2, Using Jquery to Manipulate BootstrapAngular 2，使用 Jquery 操作引导程序
【发布时间】：2018-02-14 06:58:47
【问题描述】：

我是 NG2 的新手，我正在尝试添加 Slide Up/Down 效果做默认的 Bootstrap 4 Dropdown 组件。

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');
     });
  }
}

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

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

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

规格：

引导程序 4、Angular 4.3、JQuery 3.2.1

【问题讨论】：

除了当前的错误之外，您还说了一切！你能发布控制台异常吗？你也应该使用 AfterViewInit 而不是 AfterViewChecked！
没有错误，幻灯片只是不工作：/。但是如果我在调试点复制/粘贴$(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'); }); ，当浏览器被冻结时。它开始工作
AfterViewInit 将保证视图完全加载，然后您应该能够操作 DOM。
我也尝试过 AfterViewInit 和所有其他 XD。还是不行

标签： jquery angularjs twitter-bootstrap angular2-directives

【解决方案1】：

天哪！

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

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

【讨论】：