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

我尝试了以下教程，但出现了一些错误，如预期的

标识符。

，

'{'或'；'应为。

，

应为参数声明。

，

找不到名称“$”。您是指实例成员“this.$”吗？

被抛出。代码应单击树视图箭头展开视图，然后将单击事件绑定到每个元素

组件。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() { }
.....
 }
}

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

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

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插件的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>

AdminName1Name2AnwenderName3Name4EntwicklerName5

在任何一个

函数中使用它

不要在函数之外使用。

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

---

如果由于

类声明中存在
代码执行
，而未将其包装在
函数中，则会出现异常的原因

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

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序树视图选项卡”，
templateUrl:'./treeview tab.component.html'，
样式URL:['./treeview tab.component.scss']
})
导出类TreeviewTabComponent实现OnInit{
构造函数（）{
$（“.tree node”）.find（“span”）.not（“span[class*='toggle-children']”）。单击（函数（）{console.log（$（this））}）；
}
}

移动jQuery函数将解决您的问题，并在实例化
TreeviewTabComponent
类时执行它。
确保您已安装
jQuery
。若要安装
jQuery
，请执行以下步骤

使用npm作为安装工具安装jQuery
npm安装jquery-保存

导航到angular cli项目文件夹根目录下的./angular-cli.json文件，找到scripts:[]属性，并包括jQuery的路径
“脚本”：[“./node\u 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'）。每个（函数（）{
警报（$（this.html（））；
})

弗斯特
第二
蒂尔斯
为什么要在
Angular
中使用
jQuery
？您可以使用
ViewChild
和本机选择器来做同样的事情？不是重复的，但您绝对需要阅读这个高度相关的问题：@tftd我可以在没有jQuery的情况下通过使用Angular来做同样的事情吗？您能举个例子说明我是如何做到的吗h在没有jQuery的情况下单击并设置click handlers？@Munchkin，您应该阅读/搜索。总之，您可以使用
@ViewChild
获取
DOM元素的引用，从那里它是纯javascript。您可以使用
元素。addEventListener
或
元素。click（）
（模拟单击）然后做你需要做的任何事情。没有任何
jQuery
需要什么。我做了你写的，我现在没有错误，但代码没有执行…我需要写一个就绪函数或类似的东西吗？P.S如果我在浏览器控制台中执行它，代码就可以工作，所以代码是ok@Munchkin请参见答案。单击处理程序将连接到to未展开的树…警报正在工作，单击不工作，单击处理程序部分工作，因为由于某些原因，单击没有正确执行…@Munchkin show your
HTML
您的jquery代码似乎有问题，即事件处理程序
参数声明是预期的。
，
意外标记。A需要构造函数、方法、访问器或属性。
被抛出我很愚蠢，我添加了错误的代码…正确的代码是$（“.toggle children”）。单击（）；$（“.tree node”）。查找（“span”）。而不是（“span[class*='toggle-children']”。单击（函数（）{.console.log（$（this））），它就可以工作了