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 相关文章推荐
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
js实现磁性吸附的示例
Oct 26 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输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
深入理解JavaScript定时机制
2016/10/27 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
javaScript实现一个队列的方法
2020/07/14 Javascript
在python下读取并展示raw格式的图片实例
2019/01/24 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Python 处理文件的几种方式
2019/08/23 Python
python elasticsearch环境搭建详解
2019/09/02 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
python 实现端口扫描工具
2020/12/18 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
巴西在线鞋店:Shoestock
2017/10/28 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
abstract class和interface有什么区别
2013/08/04 面试题
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
人资专员岗位职责
2014/04/04 职场文书
《春晓》教学反思
2014/04/20 职场文书
详细介绍python类及类的用法
2021/05/31 Python
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
Nginx配置之禁止指定IP访问
2022/05/02 Servers
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python