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

【问题标题】：How to integrate jQuery code into Angular 8?如何将 jQuery 代码集成到 Angular 8 中？
【发布时间】：2020-04-23 20:51:37
【问题描述】：

我尝试按照this 教程进行操作，但我收到了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 渲染并包含来自树视图插件的树视图：

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

【问题讨论】：

为什么要在Angular 中使用jQuery？你可以使用ViewChild 和原生选择器来做同样的事情吗？
不是重复的，但您绝对需要阅读这个高度相关的问题：stackoverflow.com/q/53534894/519413
@tftd 我可以在没有 jQuery 的情况下仅使用 Angular 来做同样的事情吗？你能举个例子，我如何在没有 jQuery 的情况下完成点击和设置点击处理程序？
@Munchkin 你应该阅读/搜索Using @ViewChild to inject a reference to a DOM element。总之，您可以使用@ViewChild 来获取DOM element 的引用，并且从那里它是纯javascript。您可以使用element.addEventListener 或element.click()（模拟点击）并做任何您需要做的事情。不，jQuery 需要什么。

标签： javascript jquery angular

【解决方案1】：

确保您已安装Jquery。要安装JQuery，请按照以下步骤操作

使用 npm as 安装 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';
 (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>

【讨论】：

我按照你写的做了，我现在没有错误，但是代码没有执行……我需要写一个准备好的函数或类似的东西吗？
P.S 如果我在浏览器控制台中执行代码确实可以工作，所以代码没问题
@Munchkin 看到答案。
点击处理程序附加到未展开的树...警报正在工作，点击不起作用，点击处理程序部分工作，因为由于某种原因点击没有正确执行...
@Munchkin 显示您的 HTML 似乎您的 jquery 代码有问题，即事件处理程序

【解决方案2】：

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

【讨论】：

Parameter declaration expected., Unexpected token. A constructor, method, accessor, or property was expected.被淘汰

【解决方案3】：

如果 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 类被实例化时执行它。

【讨论】：

我笨我加错了代码...正确的代码是 $(".toggle-children").click();$(".tree-node").find( "span").not("span[class*='toggle-children']").click(function (){console.log($(this))});它有效