2020年1月6日 17:55:18go评论97阅读模式

英文:

How to integrate jQuery code into Angular 8?

问题

I tried following this tutorial, but I get errors like Identifier expected., '{', or ';' expected., Parameter declaration expected., 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><router-outlet></router-outlet><app-treeview-tab><tree-root ng-reflect-nodes="[object Object],[object Object" ng-reflect-options="[object Object]"><tree-viewport><!--bindings={
  "ng-reflect-mobx-autorun": "[object Object]"
}--><!--... (omitted for brevity) ...--></tree-viewport></tree-root></app-treeview-tab></div>

1: Your link text here

英文:

I tried following this tutorial, but I get errors like Identifier expected., '{' or ';' expected., Parameter declaration expected., 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 &#39;@angular/core&#39;;

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

App.component.ts:

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

export class AppComponent implements OnInit {

  title = &#39;Avior&#39;;

  constructor() {
  }

  ngOnInit() {  }
}

UPDATE

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

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

答案1

得分: 2

确保您已安装了JQuery。要安装JQuery，请按照以下步骤进行：

使用npm安装jQuery：

npm install jquery --save

转到您的Angular CLI项目文件夹根目录中的./angular-cli.json文件，并找到scripts: []属性，将jQuery的路径包含在其中：

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

现在您需要在想要使用jQuery的任何组件中导入它：

import * as $ from 'jquery';
// 或者
declare var $: any;

为了确保Jquery正在工作：

public ngOnInit() {
    $(document).ready(function(){
        // 现在可以使用您的代码
        // $(".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>

英文:

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

install jQuery using npm as

npm install jquery — save.

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" ]

Now you have to do is to import it in whatever component you want to use jQuery
```
import * as $ from &#39;jquery&#39;;
(or)
declare var $: any;
```

To make sure Jquery is working

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

Edit To get html of elements.

$(&#39;div span&#39;).each(function(){
alert($(this).html());
})

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;banner-message&quot;&gt;
&lt;span&gt;First &lt;/span&gt;
&lt;span&gt;Second &lt;/span&gt;
&lt;span&gt;Thirs &lt;/span&gt;
&lt;/div&gt;

答案2

得分: 1

你之所以收到异常是因为在class声明内部存在代码执行，但没有包装在一个函数内。

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类时也会执行它。

英文:

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 &#39;@angular/core&#39;;
@Component({
selector: &#39;app-treeview-tab&#39;,
templateUrl: &#39;./treeview-tab.component.html&#39;,
styleUrls: [&#39;./treeview-tab.component.scss&#39;]
})
export class TreeviewTabComponent implements OnInit {
constructor() {
$(&quot;.tree-node&quot;).find(&quot;span&quot;).not(&quot;span[class*=&#39;toggle-children&#39;]&quot;).click(function (){console.log($(this))}); &lt;!-- moved --&gt;
}
}

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

答案3

得分: 0

在您的 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))
     });
 }
}

英文:

Use it in either of your function. Not outside of the function.

import { Component, OnInit } from &#39;@angular/core&#39;;
declare var $: any;
@Component({
selector: &#39;app-treeview-tab&#39;,
templateUrl: &#39;./treeview-tab.component.html&#39;,
styleUrls: [&#39;./treeview-tab.component.scss&#39;]
})
export class TreeviewTabComponent implements OnInit {
constructor() {
$(&quot;.tree-node&quot;).find(&quot;span&quot;).not(&quot;span[class*=&#39;toggle-children&#39;]&quot;).click(function (){
console.log($(this))
});
}
}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何将jQuery代码集成到Angular 8中？

问题

答案1

答案2

答案3

如何在Java中获得与JavaScript中的encryptJs相等的功能

在JavaScript中将对象分割成较小对象的最快方法是什么？

如何在点击时删除特定项目而不是列表中的最后一个项目

diff is not working in execSync producing error when file doesnot match

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论