我正在尝试在 Angular 5 中使用 jquery，特别是我正在尝试使用这个库：
https://codepen.io/rstrahl/pen/eJZQej https://codepen.io/rstrahl/pen/eJZQej
这些是步骤：
-->我创建一个新应用程序
ng new myApp
-->导航到新的角度应用程序
cd myApp
-->安装依赖项：
npm i @angular-devkit/core
-->cd 源文件
--> 光盘应用程序
-->mkdir 组件
-->cd 组件
-->我创建一个组件
ng g component myComponent1
-->in the package.json, in the dependencies section, add 1.11.3
-->in the index.html add th reference to jquery and the librery:
--> 这是 my-component1 组件 html：
<div class="page-container">
<h1>
jquery-resizable - A simple splitter panel
</h1>
<hr />
<p>
Simple example that demonstrates how to create slidable two-pane layouts <a href="http://caniuse.com/#search=flexbox">using FlexBox</a> and the resizable plug-in.
Note that Flexbox is not required, but used here to keep the layout simple.
</p>
<label>Horizontal Splitter Panes:</label>
<div class="panel-container">
<div class="panel-left">
left panel
</div>
<div class="splitter">
</div>
<div class="panel-right">
right panel
</div>
</div>
<label>Vertical Splitter Panes:</label>
<div class="panel-container-vertical">
<div class="panel-top">
top panel
</div>
<div class="splitter-horizontal">
</div>
<div id="panel-bottom">
bottom panel
</div>
</div>
<hr />
<p>
This example creates two resizables for the horizontal and vertical splitter panes:
</p>
</div>--> 这是 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);
}
}<app-my-component1>loading...</app-my-component1>-->这是app.component.html
<app-my-component1>loading...</app-my-component1>-->这是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 动画在角度下不起作用，有人可以纠正我的步骤和/或我的代码
非常感谢！
你不应该在 Angular 中使用 jQuery。虽然这是可能的（如何做到这一点，你可以在这里看到如何在 Angular 4 中使用 jQuery 插件？ https://stackoverflow.com/questions/43934727/how-to-use-jquery-plugin-with-angular-4），令人气馁。
Angular 在其内存中保存了自己的 DOM 表示，并且不使用像 jQuery 这样的查询选择器。相反，所有 DOM 操作都是由 Renderer2 完成（以及像 *ngFor 和 *ngIf 这样的 Angular 指令在后台/框架代码中访问 Renderer2）。如果您自己使用 jQuery 操作 DOM，您迟早会遇到同步问题，并且某些内容会在正确的时间从屏幕上错误地出现或消失、错误以及根本无法正确测试应用程序（Jasmine 要求您知道何时元素已渲染）或能够使用 Angular Universal。