角度プロジェクトでこのjquery関数を使用するにはどうすればいいですか

Question

私の機能は、テキストをクリックすると、クリックしたテキストの下に同じテキストを追加します。ここでは以下のコードは次のとおりです。

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

<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"> 
 
\t <p>This is p </p> 
 
\t <h3> This is h3 </h3> 
 
\t </div> 
 
    <button id="button">show it</button> 
 
</div>

私はindex.htmlを上jqueryのを求めている私のangular2プロジェクトに

を同じことを達成したいです。以下は[eactly同じである]私の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 ['*']：任意

[ts]パラメータの宣言が必要です。 （プロパティ）
ContextmenuComponent [ 'クリック']：働くすべての

Answer 1

を角度2と少し違うようになります。時間を過ごすと、もっと学びます。

Answer 2

私page.component.tsコード -

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

ウェブコーディングが持っている - あなたはこのようにそれを呼び出す必要が

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


      }); 
    } 


}