最近前端框架轉移到螞蟻的ng-alain和ng-zorro上，需要把我們自己的一些前端資料邏輯對接到ng-zorro提供的元件上，以簡化前端**。以前的做法是定義一組自己的自定義元件來包裝ng-zorro提供的元件，但這個方法的缺點是頁面上很難直接使用ng-zorro元件的屬性、事件和其他特性，除非自定義元件把ng-zorro元件的屬性和事件都暴露出來，ng-zorro元件的屬性事件非常多，全部暴露出來太麻煩，不太現實。
突然想到是否能夠利用angular自定義指令控制ng-zorro元件，這樣頁面上放置的不是自定義元件，而是ng-zorro元件，然後附加上乙個自己寫的自定義指令，新增自己的一些屬性和事件，頁面上仍然可以使用所有的ng-zorro元件的屬性和事件。
網上找到的angular自定義屬性指令的例子大多都是注入elementref和renderer2，控制html標籤的屬性。沒找到自定義指令控制第三方元件的例子。最先想到的是通過@input方式傳入ng-zorro元件的例項。如下，自定義屬性指令treeselectdirective控制ng-zorro的下拉樹元件nztreeselectcomponent
自定義指令的ts檔案：
@directive()
export class treeselectdirective implements onchanges,ondestroy,oninit,afterviewinit
這個方法可以在指令類treeselectdirective獲得元件nz-tree-select的例項，並且控制nz-tree-select元件，但因為元件例項是在@input中傳入，而@input是在生命週期的ngoninit鉤子被呼叫時才傳入，而元件的ngoninit鉤子比指令的ngoninit鉤子先被呼叫，這意味著指令獲得元件的例項之前，元件例項的各個輸入屬性已經完成初始化。這會帶來一些問題，ng-zorro元件的有些屬性初始化之後再設定就無法生效（可能是zorro的bug），必須在ng-zorro元件ngoninit鉤子呼叫前設定這些屬性值才能生效，所以通過@input傳入元件例項，無法設定這些屬性的值並使其生效。
另外，然後猜想，既然指令可以注入controlvalueaccessor，是不是也可以直接注入nztreeselectcomponent，於是試驗：
@directive()
export class treeselectdirective implements onchanges,ondestroy,oninit,afterviewinit
}
測試發現nz-tree-select成功注入指令例項，constructor被呼叫的時候，nz-tree-select元件的@input輸入屬性還沒有初始化，可以在constructor中設定nz-tree-select元件的屬性。而且**也更優雅簡潔。
angular 自定義指令
模板 var mymodule angular.module mymodule mymodule.directive directivename function return restrict string,template string,templateurl string,priority n...
angular自定義指令詳解
在運用angularjs的時候，運用自定義指令可以寫一些元件，非常方便。這裡給大家分享一些關於angular自定義指令的知識。對於指令，可以把它簡單的理解成在特定dom元素上執行的函式，指令可以擴充套件這個元素 的功能。directive mydirective function timeout,u...
angular自定義指令Directive使用方法
1.建立directive ts檔案 highlight.directive.component.ts directive,elementref 引用2個屬性 import from angular core directive 注入elementref物件 constructor private ...