如何在Angular中使用jquery的父級概念？

我是angular2的初學者，我在jquery和html中有下面的代碼。我必須在angular2中實現它。做這個的最好方式是什麼。我的一個朋友建議我處理元素參考。但我沒有任何想法請用示例和解釋給我建議最佳方式。如何在Angular中使用jquery的父級概念？

<html> 
    <head> 
     <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $('.btn').click(function(){ 
        $(this).parent().css("background-color","yellow"); 
       }) 
      }) 
     </script> 
    </head> 
    <body> 

     <div style="background-color:black; width:200px; height:50px; margin:10px;"> 
      <input class="btn" type="button" value="change color" style="" /> 
     </div> 
     <div style="background-color:cyan; width:200px; height:50px; margin:10px;"> 
      <input class="btn" type="button" value="change color" style="" /> 
     </div> 
     <div style="background-color:green; width:200px; height:50px; margin:10px;"> 
      <input class="btn" type="button" value="change color" style="" /> 
     </div> 

    </body> 
</html>

來源

2017-08-29 AMit SiNgh

開始學習Angular的概念。考慮使用Angular CLI來輕鬆啓動。 https://angular.io/tutorial – MeMeMax

你好。首先了解角度2是什麼以及它是如何工作的。訪問https://angular.io鏈接獲取更多關於angular的信息，然後自己嘗試。 –

這個問題是不是與角度cli @MeMeMax –

有在angular2存檔這幾款這樣，我使用這裏的構造intilization或ngOnInit鉤角這樣

ngOnInit() { 
    $('.btn').click(function(){ 
     $(this).parent().css("background-color","yellow"); 
    }) 
}

在HTML

<div style="background-color:black; width:200px; height:50px; margin:10px;"> 
    <input id='abc' class="btn" type="button" value="change color" style="" /> 
</div> 
<div style="background-color:cyan; width:200px; height:50px; margin:10px;"> 
    <input id='abc' class="btn" type="button" value="change color" style="" /> 
</div> 
<div style="background-color:green; width:200px; height:50px; margin:10px;"> 
    <input id='abc' class="btn" type="button" value="change color" style="" /> 
</div>

PS ：基本上你可以在構造函數中添加代碼，你可以像在document.ready...

來源

2017-08-29 10:22:24

你的朋友的建議是你的問題很好的解決方案：

要使用ElementRef你應該創建一個（屬性）指令（https://angular.io/guide/attribute-directives）

你需要ElementRef獲取當前的元素在DOM其中指令實現。

我建議你看看那些並通過教程角頁

這裏玩是一個例子：

import { Directive, ElementRef, AfterViewInit } from '@angular/core'; 
declare const $: any; // Reverse for jQuery. Don't forget to include jQuery in your project! 

    @Directive({ 
    selector: '[appButton]' 
    }) 

    export class ButtonDirective implements AfterViewInit { 

    constructor(private el: ElementRef) { } 

    ngAfterViewInit(): void { 
    $(this.el.nativeElement).click(function(){ 
     $(this).parent().css({ 
     'background-color': 'yellow' 
     }); 
    }); 
    } 
}

到最後使用該指令實現這樣的：

<div style="background-color:black; width:200px; height:50px; margin:10px;"> 
    <input appButton class="btn" type="button" value="change color" style="" /> 
</div> 
<div style="background-color:cyan; width:200px; height:50px; margin:10px;"> 
    <input appButton class="btn" type="button" value="change color" style="" /> 
</div> 
<div style="background-color:green; width:200px; height:50px; margin:10px;"> 
    <input appButton class="btn" type="button" value="change color" style="" /> 
</div>

來源

2017-09-05 21:24:39 Tzogi

如何在Angular中使用jquery的父級概念？

回答

相關問題