jquery doens不工作角5

我正在尝试在角度5中使用jquery，特别是我正在尝试使用此库：

这些是步骤：

– >我创建了一个新的应用程序

ng new myApp 

– >导航到新的角度应用程序

 cd myApp 

– >安装依赖项：

 npm i @angular-devkit/core 

– > cd src

– > cd app

– > mkdir组件

– > cd组件

– >我创建了一个组件

 ng g component myComponent1 

– >在package.json中，在dependencies部分中，添加1.11.3

– >在index.html中添加对jquery和librery的引用：

– >这是my-component1组件html：

 
 
 jquery-resizable - A simple splitter panel 
 
 
 Simple example that demonstrates how to create slidable two-pane layouts using FlexBox and the resizable plug-in. Note that Flexbox is not required, but used here to keep the layout simple. 
 Horizontal Splitter Panes: 
 
 left panel 
 
 
 
 right panel 
 
 Vertical Splitter Panes: 
 
 top panel 
 
 
 
 bottom panel 
 
 
 
 This example creates two resizables for the horizontal and vertical splitter panes: 
  

– >这是my-component1.component.css

 html, body { height: 100%; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 0; margin: 0; overflow: auto; } .page-container { margin: 20px; } /* horizontal panel*/ .panel-container { display: flex; flex-direction: row; border: 1px solid silver; overflow: hidden; /* avoid browser level touch actions */ xtouch-action: none; } .panel-left { flex: 0 0 auto; /* only manually resize */ padding: 10px; width: 300px; min-height: 200px; min-width: 150px; white-space: nowrap; background: #838383; color: white; } .splitter { flex: 0 0 auto; width: 18px; background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353; min-height: 200px; cursor: col-resize; } .panel-right { flex: 1 1 auto; /* resizable */ padding: 10px; width: 100%; min-height: 200px; min-width: 200px; background: #eee; } /* vertical panel */ .panel-container-vertical { display: flex; flex-direction: column; height: 500px; border: 1px solid silver; overflow: hidden; } .panel-top { flex: 0 0 auto; /* only manually resize */ padding: 10px; height: 150px; width: 100%; white-space: nowrap; background: #838383; color: white; } .splitter-horizontal { flex: 0 0 auto; height: 18px; background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353; cursor: row-resize; } .panel-bottom { flex: 1 1 auto; /* resizable */ padding: 10px; min-height: 200px; background: #eee; } label { font-size: 1.2em; display: block; font-weight: bold; margin: 30px 0 10px; } pre { margin: 20px; padding: 10px; background: #eee; border: 1px solid silver; border-radius: 4px; overflow: auto; } 

– >这是my-component1.component.ts

 import { Component, OnInit } from '@angular/core'; declare var jquery:any; declare var $ :any; @Component({ selector: 'app-my-component1', templateUrl: './my-component1.component.html', styleUrls: ['./my-component1.component.css'] }) export class MyComponent1Component implements OnInit { constructor() { } ngOnInit() { $(".panel-left").resizable({ handleSelector: ".splitter", resizeHeight: false }); $(".panel-top").animate({height:'72px'}, 500); } } 

 loading... 

– >这是app.component.html

 loading... 

– >这是app.module.ts

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; } 

jquery动画在角度不起作用，有人可以纠正我的步骤和/或我的代码

非常感谢！

Answer 1

你不应该在Angular中使用jQuery。 虽然它是可能的（如何操作，你可以在这里看到如何使用Angular 4的jQuery插件？ ），不鼓励。

Angular在其内存中拥有DOM的自己的表示，并且不使用像jQuery这样的查询选择器。 相反，所有DOM操作都是由Renderer2完成的（和Angular-directives一样，* ngFor和* ngIf在后台/框架代码中访问Renderer2）。 如果您自己使用jQuery操作DOM，您迟早会遇到同步问题并且错误地出现或者没有在屏幕上的正确时间消失，错误并且无法正确测试应用程序（Jasmine要求您知道何时元素已被渲染）或能够使用Angular Universal。