英文:
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 '@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>
答案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 '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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('div span').each(function(){
alert($(this).html());
})
<!-- language: lang-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>
<!-- end snippet -->
答案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 '@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.
答案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 '@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))
});
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论