Как интегрировать код jQuery в Angular 8? - PullRequest
Новая
       1

Как интегрировать код jQuery в Angular 8?

0 голосов
/ 06 января 2020

Я пытался следовать этому учебнику, но я получаю такие ошибки, как Identifier expected., '{' or ';' expected., Parameter declaration expected., Cannot find name '$'. Did you mean the instance member 'this.$'?. Код должен нажимать на стрелки древовидной структуры, чтобы расширить представление, а затем привязать событие щелчка к каждому отдельному элементу.

Component.ts: 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-treeview-tab',
  templateUrl: './treeview-tab.component.html',
  styleUrls: ['./treeview-tab.component.scss']
})
export class TreeviewTabComponent implements OnInit {
  $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))});
  constructor() { }
.....
 }
}

App.component.ts: 

import { Component, OnInit } from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  title = 'Avior';

  constructor() {
  }

  ngOnInit() {  }
}

ОБНОВЛЕНИЕ

Отображается HTML, который отображается Angular и содержит представление дерева из плагина treeview: 

<div _ngcontent-ais-c3=""><router-outlet _ngcontent-ais-c3=""></router-outlet><app-treeview-tab _nghost-ais-c4=""><tree-root _ngcontent-ais-c4="" ng-reflect-nodes="[object Object],[object Object" ng-reflect-options="[object Object]"><tree-viewport><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="height: auto;"><div class="angular-tree-component"><!--bindings={
  "ng-reflect-ng-if": "[object Object],[object Object"
}--><tree-node-collection ng-reflect-nodes="[object Object],[object Object" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-1 tree-node tree-node-expanded"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-wrapper toggle-children-wrapper-expanded"><span class="toggle-children"></span></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Admin</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2",
  "ng-reflect-is-open": "true"
}--><div class="tree-children"><!--bindings={
  "ng-reflect-ng-if": "[object Object],[object Object"
}--><tree-node-collection ng-reflect-nodes="[object Object],[object Object" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name1</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="1"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name2</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="2"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-1 tree-node tree-node-expanded"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-wrapper toggle-children-wrapper-expanded"><span class="toggle-children"></span></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="1"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Anwender</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2",
  "ng-reflect-is-open": "true"
}--><div class="tree-children"><!--bindings={
  "ng-reflect-ng-if": "[object Object],[object Object"
}--><tree-node-collection ng-reflect-nodes="[object Object],[object Object" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name3</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="1" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="1"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name4</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="2"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="2"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node><tree-node ng-reflect-node="[object Object]" ng-reflect-index="2" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-1 tree-node tree-node-active tree-node-focused tree-node-expanded"><!--bindings={
  "ng-reflect-ng-if": "false"
}--><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="2" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-wrapper toggle-children-wrapper-expanded"><span class="toggle-children"></span></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!----></tree-node-expander><div class="node-content-wrapper node-content-wrapper-active node-content-wrapper-focused" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="2"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Entwickler</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2",
  "ng-reflect-is-open": "true"
}--><div class="tree-children"><!--bindings={
  "ng-reflect-ng-if": "[object Object]"
}--><tree-node-collection ng-reflect-nodes="[object Object]" ng-reflect-tree-model="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><div style="margin-top: 0px;"><!--bindings={
  "ng-reflect-ng-for-of": "[object Object]",
  "ng-reflect-ng-for-track-by": "function (index, node) {\n     "
}--><tree-node ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="tree-node-level-2 tree-node tree-node-leaf"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="0"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot><tree-node-wrapper ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="node-wrapper" style="padding-left: 0px;"><!--bindings={}--><tree-node-expander ng-reflect-node="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span class="toggle-children-placeholder"></span><!----></tree-node-expander><div class="node-content-wrapper" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function (element, $event) {
 " draggable="false" ng-reflect-dragged-element="[object Object]"><tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><span>Name5</span><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-content></div></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></tree-node-wrapper><tree-node-children ng-reflect-node="[object Object]" ng-reflect-templates="[object Object]"><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!----><!--bindings={
  "ng-reflect-animate-speed": "1",
  "ng-reflect-animate-acceleration": "1.2"
}--><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="1"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div><!----></tree-node-children><tree-node-drop-slot ng-reflect-node="[object Object]" ng-reflect-drop-index="3"><div class="node-drop-slot" ng-reflect-allow-dragover-styling="true" ng-reflect-tree-allow-drop="function() {
    [native code]"></div></tree-node-drop-slot></div><!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--><!----></tree-node></div></tree-node-collection><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div></div></tree-viewport></tree-root></app-treeview-tab></div>

Ответы [ 3 ]

2 голосов
/ 06 января 2020

Убедитесь, что вы установили Jquery. Для установки JQuery выполните следующие шаги

  1. установите jQuery, используя npm в качестве

npm install jquery — save ,

Перейдите к файлу ./angular-cli.json в root вашей папки проекта CLI Angular, найдите свойство scripts: [] и укажите путь к jQuery

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Теперь вам нужно импортировать его в любой компонент, который вы хотите использовать jQuery

 import * as $ from 'jquery';
 (or)
 declare var $: any;

Чтобы убедиться, что Jquery работает 

 public ngOnInit()  {
    $(document).ready(function(){
       // Now use your code 
      // $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))});
       $('.tree-node > span:not(.toggle-children)').off('click').on('click', function(){
 console.log('clicked');
 }) }); }

Редактировать Чтобы получить html элементов. 

$('div span').each(function(){
		alert($(this).html());
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="banner-message">
<span>First </span>
<span>Second </span>
<span>Thirs </span>
</div>
1 голос
/ 06 января 2020

Причина, по которой вы получаете исключение, потому что есть code-execution в class declaration без его обтекания в function. 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-treeview-tab',
  templateUrl: './treeview-tab.component.html',
  styleUrls: ['./treeview-tab.component.scss']
})
export class TreeviewTabComponent implements OnInit {

  constructor() {
    $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){console.log($(this))}); <!-- moved -->
 }
}

Перемещение вашей функции jQuery разрешит вашу и будет также выполняться при создании экземпляра класса TreeviewTabComponent.

0 голосов
/ 06 января 2020

Используйте его в любом из ваших function. Not outside of the function.

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-treeview-tab',
  templateUrl: './treeview-tab.component.html',
  styleUrls: ['./treeview-tab.component.scss']
})
export class TreeviewTabComponent implements OnInit {

  constructor() {
     $(".tree-node").find("span").not("span[class*='toggle-children']").click(function (){
         console.log($(this))
     });
 }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...