Angular 2自定義指令的工作原理是什麼？

我很新Angular 2我正在關注如何創建一個自定義指令的教程，我對它是如何工作的有些懷疑。Angular 2自定義指令的工作原理是什麼？

我會盡力解釋它做了什麼。

我有一個包含這樣的一個觀點：

<div class="row"> 
    <div class="col-xs-12"> 
    <div 
     class="btn-group" 
     appDropDown 
    > 
     <button 
     type="button" 
     class="btn btn-primary dropdown-toggle">Manage Recipe <span class="caret"></span> 
     </button> 

     <ul class="dropdown-menu"> 
     <li><a href="#">To Shopping List</a></li> 
     <li><a href="#">Edit Recipe</a></li> 
     <li><a href="#">Delete Recipe</a></li> 
     </ul> 
    </div> 
    </div> 
</div>

正如你可以看到有類此潛水BTN-組有我的自定義appDropDown設置好的上

<div 
    class="btn-group" 
    appDropDown 
>

這一習俗指令只需在單擊內部按鈕時添加open類到此div（因此UL內容由BootStrap顯示）。

這是我的自定義指令代碼：

import {Directive, HostBinding, HostListener} from "@angular/core"; 

@Directive({ 
    selector: '[appDropDown]' 
}) 
export class DropDownDirective { 

    @HostBinding('class.open') isOpen = false; 

    // listen to a click event: 
    @HostListener('click') toggleOpen() { 
    this.isOpen = !this.isOpen; 
    } 

}

從我可以undestood這個指令以這種方式工作：

1）這條線：

@HostBinding('class.open') isOpen = false;

約束isOpen變量的值爲class.open div的屬性，我的習慣m指令被應用。

所以它應該意味着如果這個潛水有開放類設置的值將是真實的，否則將是錯誤的。

這個解釋是否正確？

2）這個方法：

// listen to a click event: 
@HostListener('click') toggleOpen() { 
    this.isOpen = !this.isOpen; 
}

當用戶在視圖中單擊該按鈕進行：

<button 
    type="button" 
    class="btn btn-primary dropdown-toggle">Manage Recipe <span class="caret"></span> 
    </button>

好了，現在是我的疑問：爲什麼這Methis Hotel酒店只有當我執行點擊這個特定的按鈕，而不是當我的網頁中的任何其他按鈕被點擊？

來源

2017-07-28 AndreaNobili

因此，這應該意味着如果這個潛水設置了公開課，的值將是真實的，否則將是錯誤的。

這實際上是相反的。如果屬性isOpen爲真，則類open將被添加到div。如果錯誤 - 刪除。

當用戶在視圖中單擊該按鈕進行：

實際上，它會當有任何元素上的點擊是材料對你所申請到一個孩子被觸發指令，因爲本地事件泡沫。

如果您要檢查的button具體而言，使用下面的代碼：

@HostListener('click', ['$event.target']) 
    clicked(element) { 
    if (element.classList.contains('dropdown-toggle')) { 
     console.log('button clicked'); 
    } 
    }

來源

2017-07-28 13:17:00

Angular 2自定義指令的工作原理是什麼？

回答

相關問題