JQuery не работает в угловых 5

Question

Я пытаюсь использовать jquery в angular 5, в частности, я пытаюсь использовать эту библиотеку:

https://codepen.io/rstrahl/pen/eJZQej

Это шаги:

-> Я создаю новое приложение

ng new myApp

-> перейти к новому угловому приложению

cd myApp

-> установить зависимости:

npm i @angular-devkit/core

-> cd src

-> cd app

-> компоненты mkdir

-> Компоненты CD

-> Я создаю компонент

ng g component myComponent1

-> в package.json, в разделе зависимостей добавить 1.11.3

-> в index.html добавить ссылку на jquery и библиотеку:

-> html компонента my-component1:

<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 не работает в угловом режиме, может кто-то исправить мои шаги и / или мой код

Большое спасибо!

Answer 1

Вы не должны использовать jQuery в Angular. Хотя это возможно (как это сделать, вы можете увидеть здесь Как использовать плагин jQuery с Angular 4? ), это не рекомендуется.

Angular хранит собственное представление DOM в своей памяти и не использует селекторы запросов, такие как jQuery. Вместо этого все DOM-манипуляции выполняются Renderer2 (и Angular-директивами, такими как * ngFor и * ngIf, которые обращаются к этому Renderer2 в background / framework-code). Если вы манипулируете DOM с помощью jQuery самостоятельно, вы рано или поздно столкнетесь с проблемами синхронизации, и у вас будут неправильно отображаться или не исчезать вещи в нужное время, ошибки и просто невозможность правильно протестировать приложение (Jasmine требует, чтобы вы знали, когда элементы были визуализированы) или возможность использовать Angular Universal.