Angular 碎片 —— 自定义Directive

目录

前言

代码预览

代码详解

---

前言

我们知道，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';