stackoom
  简体   繁体   中英

How to integrate jQuery code into Angular 8?

 原文  2020-01-06 09:55:18  3   3    javascript/ jquery/ angular

Question

I tried following this tutorial, but I get errors like Identifier expected. , '{' or ';' expected. '{' or ';' expected. , Parameter declaration expected. , Cannot find name '$'. Did you mean the instance member 'this.$'? Cannot find name '$'. Did you mean the instance member 'this.$'? thrown out. The code is supposed to click on the treeview arrows to expand the view and then bind a click event to each single element.

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() {  }
}

UPDATE

Rendered HTML, which is rendered by Angular and contains the treeview from the treeview plugin:

<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 answers

solution1
 2 ACCPTED  2020-01-06 09:58:31

Make sure you have installed Jquery .To Install JQuery follow below steps

  1. install jQuery using npm as

npm install jquery — save .

  1. Navigate to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery

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

  1. Now you have to do is to import it in whatever component you want to use jQuery

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

To make sure Jquery is working

 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');
 }) }); }

Edit To get html of elements. 

 $('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>

solution2
 1  2020-01-06 09:57:55

The reason you're getting an exception if because there's code-execution within a class declaration without it being wrapped within a 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 -->
 }
}

Moving your jQuery function will resolve your issue and will also execute it when the TreeviewTabComponent class is being instanced.

solution3
 0  2020-01-06 09:57:54

Use it in either of your 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))
     });
 }
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to integrate “if” in jquery code How to integrate jquery code without any code in the html file how to integrate logentries in angular jQuery autocomplete how to integrate this code with our function to validate? How to integrate Angular 4 with Vaadin framework How to integrate mixpanel with angular2 How to Integrate angular 4 or higher with express How to integrate WinBox JS in Angular? How to integrate a jQuery function in angularjs? How to Integrate jQuery with React js?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM