目录
前言
我们知道,AngularJS框架中,directive是一个重要的概念,是代码重用的基础。不过,该框架中directive的用法和配置稍显复杂。1.6版本后定义了新的component方法后,组件化编程相对更自然些。到了Angular框架中,component开始大行其道,出色的设计思想让组件化编程更为自然和易用了,而directive似乎销声匿迹了。
事实上,在Angular中,Directive的概念依然存在,Component就是一种特殊的Directive。只不过前者必须要提供视图,即Template;后者则不需要一定提供。通常情况下,非Component的Directive用于HTML标签的属性,标签可以是HTML原生的,也可以是其他Component,用途是赋予宿主标签某种行为。
本文介绍学习如何自定义一个Angular Directive。示例代码的基本结构采用了Angular官方的quickstart package,可以从官网下载。本文的示例代码可以在这里找到。
代码预览
基本的Directive语法可以从官方文档找到,这里先给出总体的代码,然后依次按需解释。
import { Directive, HostBinding, HostListener, Input } from '@angular/core';