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

Question

What my function does is, when i click on a text, it appends the same text below the clicked text. Here is the code below:

 $('*').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()); }); 

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

I want to achieve the same in my angular2 project

I have called jquery on index.html. Below is my html code [which is eactly same]

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>

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

}

But it is not working and i am getting errors, please help me get this code working.

Edit 1: Errors coming -

[ts] Parameter declaration expected. (property)
ContextmenuComponent['*']: any

[ts] Parameter declaration expected. (property)
ContextmenuComponent['click']: any

Answer 1

my page.component.ts code which works -

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

You need to call it like this -

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

Web coding has become a bit different with angular 2. Spend some time and you will learn more.