Question

我的功能是，当我点击文字时，它会在点击的文字下面附加相同的文字。以下是代码：

＆＃13;

$('*').on('click', function(e){
    e.stopPropagation()
	var thisDiv_name = $(this).attr('id');
	var thisDiv = $(this);
	var parentDiv = $(this).parent();
   // $(this).clone().appendTo(parentDiv);	
   $(this).attr('style','outline: #6c6b69 solid thin;');
$(this).clone().insertAfter(thisDiv);
//alert($(this).html());				
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <div id="main">
    <div id="content">content</div>
    <div id="content2">
	<p>This is p </p>
	<h3> This is h3 </h3>
	</div>
    <button id="button">show it</button>
</div>

＆＃13;

我想在angular2项目中实现相同的目标

我在index.html上调用了jquery。下面是我的html代码[完全相同]

test.component.html

  <div id="main">
    <div id="content">content</div>
    <div id="content2">
    <p>This is p </p>
    <h3> This is h3 </h3>
    </div>
    <button id="button">show it</button>
</div>

我的test.component.ts

import { Component, OnInit } from '@angular/core';

declare var $: any;

@Component({
  selector: 'app-contextmenu',
  templateUrl: './contextmenu.component.html',
  styleUrls: ['./contextmenu.component.css']
})
export class ContextmenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

 $('*').on('click', function(e){
    e.stopPropagation()
    var thisDiv_name = $(this).attr('id');
    var thisDiv = $(this);
    var parentDiv = $(this).parent();
   // $(this).clone().appendTo(parentDiv);  
   $(this).attr('style','outline: #6c6b69 solid thin;');
$(this).clone().insertAfter(thisDiv);
//alert($(this).html());                
});

}

但它无效，我收到错误，请帮助我让这段代码正常工作。

编辑1：错误到来 -

[ts]预期的参数声明。（财产）
  ContextmenuComponent [＆＃39; *＆＃39;]：任何

[ts]预期的参数声明。（财产）
  ContextmenuComponent [＆＃39;点击＆＃39;]：任何

Answer 1

我的page.component.ts代码有效 -

import { Component, OnInit } from '@angular/core';
//import $ from 'jquery';

declare var $: any;

@Component({
  selector: 'app-contextmenu',
  templateUrl: './contextmenu.component.html',
  styleUrls: ['./contextmenu.component.css']
})
export class ContextmenuComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit(){
           $(document).ready(function(){

$('*').on('click', function(e){
    e.stopPropagation()
    var thisDiv_name = $(this).attr('id');
    var thisDiv = $(this);
    var parentDiv = $(this).parent();   
   $(this).attr('style','outline: #6c6b69 solid thin;');
$(this).clone().insertAfter(thisDiv);               
});


           });
     }


}

Answer 2

你需要这样称呼它 -

  ngAfterViewInit(){
           $(document).ready(function(){
...
     } // your code
}

网络编码与角度2有点不同。花一些时间，你会学到更多。

如何在我的角度项目中使用此jquery函数

2 个答案: