Angular 4 指令快速入门教程


Posted in Javascript onJune 07, 2017

本系列教程的开发环境及开发语言:

  1. Angular 4 +
  2. Angular CLI
  3. TypeScript

基础知识

Angular CLI 基本使用

安装 Angular CLI (可选)

npm install -g @angular/cli

创建新的项目

ng new PROJECT-NAME

启动本地服务器

cd PROJECT-NAME
ng serve

Angular 指令简介

Angular 的指令分为三种:

  1. 组件(Component directive):用于构建UI组件,继承于 Directive 类
  2. 属性指令(Attribute directive):用于改变组件的外观或行为
  3. 结构指令(Structural directive):用于动态添加或删除 DOM 元素来改变 DOM 布局

Angular 指令分类图

Angular 4 指令快速入门教程

Angular 组件组成图

Angular 4 指令快速入门教程

第一节 - 创建指令

在 Angular 中,我们可以使用 HostBinding 装饰器,实现元素的属性绑定。

指令的作用

该指令用于演示如何利用 HostBinding 装饰器,设置元素的 innerText 属性。

指令的实现

import { Directive, HostBinding} from '@angular/core';

@Directive({
  selector: '[greet]'
})
export class GreetDirective {
 @HostBinding() innerText = 'Hello, Everyone!';
}
指令的应用
import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <h2>Hello, Angular</h2>
  <h2 greet>Hello, Angular</h2>
 `,
})
export class AppComponent { }

第二节 - 定义输入属性

为了能够让用户自定义 GreetDirective 指令的问候内容,我们需要使用 Input 装饰器去定义指令的输入属性。

指令的作用

该指令用于演示如何利用 Input 装饰器,定义指令的输入属性,从而实现让用户自定义问候内容。

指令的实现

import { Directive, HostBinding, Input } from '@angular/core';

@Directive({
  selector: '[greet]'
})
export class GreetDirective {
  @Input() greet: string;
  @HostBinding() get innerText() {
    return this.greet;
  }
}

指令的应用

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <h2>Hello, Angular</h2>
  <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2>
 `,
})
export class AppComponent { }

第三节 - 事件处理

在 Angular 中,我们可以使用 HostListener 属性装饰器,实现元素的事件绑定。

指令的作用

该指令用于演示如何利用 HostListener 装饰器,监听用户的点击事件。

指令的实现

import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[greet]'
})
export class GreetDirective {
  @Input() greet: string;

  @HostBinding() get innerText() {
   return this.greet;
  }

  @HostListener('click',['$event']) 
  onClick(event) {
   this.greet = 'Clicked!';
  }
}

指令的应用

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <h2>Hello, Angular</h2>
  <h2 [greet]="'Hello, Semlinker!'">Hello, Angular</h2>
 `,
})
export class AppComponent { }

第四节 - 获取宿主元素属性值

在 Angular 中,我们可以通过 Attribute 装饰器来获取指令宿主元素的属性值。

指令的作用

该指令用于演示如何利用 Attribute 装饰器,获取指令宿主元素上的自定义属性 author 的值。

指令的实现

import { Directive, HostBinding, HostListener, Input, Attribute } from '@angular/core';

@Directive({
  selector: '[greet]'
})
export class GreetDirective {
  @Input() greet: string;

  @HostBinding() get innerText() {
    return this.greet;
  }

  @HostListener('click',['$event']) 
  onClick(event) {
    this.greet = 'Clicked!';
    console.dir(event);
  }

  constructor(@Attribute('author') public author: string) {
    console.log(author);
  }
}

指令的应用

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <h2>Hello, Angular</h2>
  <h2 [greet]="'Hello, Semlinker!'" 
   author="semlinker">Hello, Angular</h2>
 `,
})
export class AppComponent { }

第五节 - 使用 <ng-template> 元素

在 Angular 中,我们可以通过 ViewChild 装饰器来获取视图中定义的模板元素,然后利用 ViewContainerRef 对象的 createEmbeddedView() 方法,创建内嵌视图。

import { Component, TemplateRef, ViewContainerRef, ViewChild, 
 AfterViewInit } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <ng-template #tpl>
   Hello, Semlinker!
  </ng-template>
 `,
})
export class AppComponent implements AfterViewInit{
 @ViewChild('tpl')
 tplRef: TemplateRef<any>;

 constructor(private vcRef: ViewContainerRef) {}

 ngAfterViewInit() {
  this.vcRef.createEmbeddedView(this.tplRef);
 }
}

第六节 - 使用 ngTemplateOutlet 指令

ngTemplateOutlet 的作用

该指令用于基于已有的 TemplateRef 对象,插入对应的内嵌视图。在应用 NgTemplateOutlet 指令时,我们可以通过 [ngTemplateOutletContext] 属性来设置 EmbeddedViewRef 的上下文对象。绑定的上下文应该是一个对象,此外可通过 let语法来声明绑定上下文对象属性名。

ngTemplateOutlet 的使用

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <ng-template #stpl>
   Hello, Semlinker!
  </ng-template>
  <ng-template #atpl>
   Hello, Angular!
  </ng-template>
  <div [ngTemplateOutlet]="atpl"></div>
  <div [ngTemplateOutlet]="stpl"></div>
 `,
})
export class AppComponent { }

ngOutletContext 的使用

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <ng-template #stpl let-message="message">
   <p>{{message}}</p>
  </ng-template>
  <ng-template #atpl let-msg="message">
   <p>{{msg}}</p>
  </ng-template>
  <ng-template #otpl let-msg>
   <p>{{msg}}</p>
  </ng-template>
  <div [ngTemplateOutlet]="atpl"
   [ngOutletContext]="context">
  </div>
  <div [ngTemplateOutlet]="stpl"
   [ngOutletContext]="context">
  </div>
  <div [ngTemplateOutlet]="otpl"
   [ngOutletContext]="context">
  </div>
 `,
})
export class AppComponent {
 context = { message: 'Hello ngOutletContext!', 
  $implicit: 'Hello, Semlinker!' };
}

第七节 - 创建结构指令

指令的功能

该指令实现 ngIf 指令相反的效果,当指令的输入条件为 Falsy 值时,显示DOM元素。

指令的实现

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[exeUnless]'
})
export class UnlessDirective {

  @Input('exeUnless')
  set condition(newCondition: boolean) {
    if (!newCondition) { 
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  constructor(private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef) {
  }
}

指令的应用

import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 template: `
  <h2 *exeUnless="condition">Hello, Semlinker!</h2> 
 `,
})
export class AppComponent {
 condition: boolean = false;
}

我有话说

Angular 中指令与组件有什么关系?

组件继承于指令,并扩展了与 UI 视图相关的属性,如 template、styles、animations、encapsulation 等。

结构指令中的 TemplateRef 与 ViewContainerRef 有什么作用?

TemplateRef:用于表示内嵌的 template 模板元素,通过 TemplateRef 实例,我们可以方便创建内嵌视图(Embedded Views),且可以轻松地访问到通过 ElementRef 封装后的 nativeElement。需要注意的是组件视图中的 template 模板元素,经过渲染后会被替换成 comment 元素。

ViewContainerRef:用于表示一个视图容器,可添加一个或多个视图。通ViewContainerRef 实例,我们可以基于 TemplateRef 实例创建内嵌视图,并能指定内嵌视图的插入位置,也可以方便对视图容器中已有的视图进行管理。简而言之,ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
基于Angularjs实现分页功能
May 30 Javascript
使用jquery给指定的table动态添加一行、删除一行
Oct 13 Javascript
微信小程序 标签传入数据
May 08 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
JS实现DOM删除节点操作示例
Apr 04 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
May 07 Javascript
jstree单选功能的实现方法
Jun 07 #Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 #jQuery
webpack打包单页面如何引用的js
Jun 07 #Javascript
vue使用Axios做ajax请求详解
Jun 07 #Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 #Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 #Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 #Javascript
You might like
php的memcache类分享(memcache队列)
2014/03/26 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
php写app用的框架整理
2019/09/29 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
讲解Python中运算符使用时的优先级
2015/05/14 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
经管应届生求职信
2013/11/17 职场文书
中级会计职业生涯规划书
2014/03/01 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
公司应聘自荐书
2014/06/14 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
新闻稿怎么写
2015/07/18 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android