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

Posted 2023-02-22

【中文标题】Angular 2，使用 Jquery 操作引导程序

【英文标题】：Angular 2, Using Jquery to Manipulate Bootstrap

【发布时间】：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。还是不行

【参考方案1】：

天哪！

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

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