Angular Directive 初探 - Part.4
在初探 part.1 的時候，提到了 Angular directive 有分三種，Component, Attribute Directive and Structural Directive，而之前介紹了 Attribute Directive，知道如何建立與使用，這次就來研究一下 Structural Directive 吧！ 什麼是 structural directive ?Structural directives 負責 HTML 的 layout。通常是藉由加入、移除或操作 element ，將 DOM 架構進行繪製或重繪的動作，就和其他的 directives 使用方式一樣，套用到 HTML host element 上，並且依照這個 directive 有什麼功能去進行處理，而被套用的 h..
Read moreAngular Directive 初探 - Part.3
前兩篇文章，Part.1 和 Part.2 的介紹，可以認識到如何寫一個簡單且富有彈性的 directive 並套用，這次來嘗試將 jQuery datepicker 的執行改成 directive ，並認識一下 Angular Directive 的 Decorator 吧！ 製作 jQuery datepicker 的 directive首先，npm 要先準備好 jquery 以及 bootstrap-datepicker，包含定義檔的部分： npm install jquery bootstrap @types/jquery @types/bootstrap-datepicker --save 相依套件安裝完成後，到 tsconfig.app.ts 中，將 types 的陣列加上 “jquery” ..
Read moreAngular Directive 初探 - Part.2
上一篇文章，我們初步了解 directive 基本的使用方式，這次來嘗試加入一些事件或值的傳遞，進一步體驗這強大又方便的 Angular Directive。 反應由使用者發起的事件目前 appHighlight 很單純的去改變一個元素的樣式而已，但 directive 可以做得更動態，例如我們可以指定當使用者將滑鼠移入或移出元素的時候，進行背景色的改變。在最上方從 @angular/core import 的部分加入 HostListener： import { Directive, ElementRef, OnInit, HostListener, Input, } from '@angular/core'; 然後加入兩個 eventhandle..
Read more