Jeff Wu's Note

Archives · 2017

Home

About

Archives

loading..
Angular 2DirectiveStructural Directives

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 more
Angular 2DirectiveAttribute Directives

Angular 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 more
Angular 2DirectiveAttribute Directives

Angular Directive 初探 - Part.2

上一篇文章,我們初步了解 directive 基本的使用方式,這次來嘗試加入一些事件或值的傳遞,進一步體驗這強大又方便的 Angular Directive。 反應由使用者發起的事件目前 appHighlight 很單純的去改變一個元素的樣式而已,但 directive 可以做得更動態,例如我們可以指定當使用者將滑鼠移入或移出元素的時候,進行背景色的改變。在最上方從 @angular/core import 的部分加入 HostListener: import { Directive, ElementRef, OnInit, HostListener, Input, } from '@angular/core'; 然後加入兩個 eventhandle..

Read more