剖析Angular Component的源码示例

Web Component

在介绍Angular Component之前，我们先简单了解下W3C Web Components

定义

W3C为统一组件化标准方式，提出Web Component的标准。

每个组件包含自己的html、css、js代码。
Web Component标准包括以下四个重要的概念：
1.Custom Elements（自定义标签）：可以创建自定义 HTML 标记和元素；
2.HTML Templates（HTML模版）：使用 <template> 标签去预定义一些内容，但并不加载至页面，而是使用 JS 代码去初始化它；
3.Shadow DOM（虚拟DOM）：可以创建完全独立与其他元素的DOM子树；
4.HTML Imports（HTML导入）：一种在 HTML 文档中引入其他 HTML 文档的方法，<link rel="import" href="example.html" rel="external nofollow" />。

概括来说就是，可以创建自定义标签来引入组件是前端组件化的基础，在页面引用 HTML 文件和 HTML 模板是用于支撑编写组件视图和组件资源管理，而 Shadow DOM 则是隔离组件间代码的冲突和影响。

示例

定义hello-component

<template id="hello-template">
  <style>
    h1 {
      color: red;
    }
  </style>
  <h1>Hello Web Component!</h1>
</template>

<script>

  // 指向导入文档，即本例的index.html
  var indexDoc = document;

  // 指向被导入文档，即当前文档hello.html
  var helloDoc = (indexDoc._currentScript || indexDoc.currentScript).ownerDocument;

  // 获得上面的模板
  var tmpl = helloDoc.querySelector('#hello-template');

  // 创建一个新元素的原型，继承自HTMLElement
  var HelloProto = Object.create(HTMLElement.prototype);

  // 设置 Shadow DOM 并将模板的内容克隆进去
  HelloProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(indexDoc.importNode(tmpl.content, true));
  };

  // 注册新元素
  var hello = indexDoc.registerElement('hello-component', {
    prototype: HelloProto
  });
</script>

使用hello-component

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="赖祥燃, laixiangran@163.com, http://www.laixiangran.cn"/>
  <title>Web Component</title>
  <!--导入自定义组件-->
  <link rel="import" href="hello.html" rel="external nofollow" >
</head>
<body>
  <!--自定义标签-->
  <hello-component></hello-component>
</body>
</html>

从以上代码可看到，hello.html 为按标准定义的组件（名称为 hello-component ），在这个组件中有自己的结构、样式及逻辑，然后在 index.html 中引入该组件文件，即可像普通标签一样使用。

Angular Component

Angular Component属于指令的一种，可以理解为拥有模板的指令。其它两种是属性型指令和结构型指令。

基本组成

@Component({
  selector: 'demo-component',
  template: 'Demo Component'
})
export class DemoComponent {}
  1. 组件装饰器：每个组件类必须用@component进行装饰才能成为Angular组件。
  2. 组件元数据：组件元数据：selector、template等，下文将着重讲解每个元数据的含义。
  3. 组件类：组件实际上也是一个普通的类，组件的逻辑都在组件类里定义并实现。
  4. 组件模板：每个组件都会关联一个模板，这个模板最终会渲染到页面上，页面上这个DOM元素就是此组件实例的宿主元素。

组件元数据

自身元数据属性

名称 类型 作用
animations AnimationEntryMetadata[] 设置组件的动画
changeDetection ChangeDetectionStrategy 设置组件的变化监测策略
encapsulation ViewEncapsulation 设置组件的视图包装选项
entryComponents any[] 设置将被动态插入到该组件视图中的组件列表
interpolation [string, string] 自定义组件的插值标记，默认是双大括号
moduleId string 设置该组件在 ES/CommonJS 规范下的模块id，它被用于解析模板样式的相对路径
styleUrls string[] 设置组件引用的外部样式文件
styles string[] 设置组件使用的内联样式
template string 设置组件的内联模板
templateUrl string 设置组件模板所在路径
viewProviders Provider[] 设置组件及其所有子组件（不含ContentChildren）可用的服务

从 core/Directive 继承

名称 类型 作用
exportAs string 设置组件实例在模板中的别名，使得可以在模板中调用
host {[key: string]: string} 设置组件的事件、动作和属性等
inputs string[] 设置组件的输入属性
outputs string[] 设置组件的输出属性
providers Provider[] 设置组件及其所有子组件（含ContentChildren）可用的服务（依赖注入）
queries {[key: string]: any} 设置需要被注入到组件的查询
selector string 设置用于在模板中识别该组件的css选择器（组件的自定义标签）

几种元数据详解

以下几种元数据的等价写法会比元数据设置更简洁易懂，所以一般推荐的是等价写法。

inputs

@Component({
  selector: 'demo-component',
  inputs: ['param']
})
export class DemoComponent {
  param: any;
}

等价于：

@Component({
  selector: 'demo-component'
})
export class DemoComponent {
  @Input() param: any;
}

outputs

@Component({
  selector: 'demo-component',
  outputs: ['ready']
})
export class DemoComponent {
  ready = new eventEmitter<false>();
}

等价于：

@Component({
  selector: 'demo-component'
})
export class DemoComponent {
  @Output() ready = new eventEmitter<false>();
}

host

@Component({
  selector: 'demo-component',
  host: {
    '(click)': 'onClick($event.target)', // 事件
    'role': 'nav', // 属性
    '[class.pressed]': 'isPressed', // 类
  }
})
export class DemoComponent {
  isPressed: boolean = true;

  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

等价于：

@Component({
  selector: 'demo-component'
})
export class DemoComponent {
  @HostBinding('attr.role') role = 'nav';
  @HostBinding('class.pressed') isPressed: boolean = true;

  @HostListener('click', ['$event.target'])
  onClick(elem: HTMLElement) {
    console.log(elem);
  }
}

queries - 视图查询

@Component({
  selector: 'demo-component',
  template: `
    <input #theInput type='text' />
    <div>Demo Component</div>
  `,
  queries: {
    theInput: new ViewChild('theInput')
  }
})
export class DemoComponent {
  theInput: ElementRef;
}

等价于：

@Component({
  selector: 'demo-component',
  template: `
    <input #theInput type='text' />
    <div>Demo Component</div>
  `
})
export class DemoComponent {
  @ViewChild('theInput') theInput: ElementRef;
}

queries - 内容查询

<my-list>
  <li *ngFor="let item of items;">{{item}}</li>
</my-list>
@Directive({
  selector: 'li'
})
export class ListItem {}
@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `,
  queries: {
    items: new ContentChild(ListItem)
  }
})
export class MyListComponent {
  items: QueryList<ListItem>;
}

等价于：

@Component({
  selector: 'my-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class MyListComponent {
  @ContentChild(ListItem) items: QueryList<ListItem>;
}

styleUrls、styles

styleUrls和styles允许同时指定。

优先级：模板内联样式 > styleUrls > styles。

建议：使用styleUrls引用外部样式表文件，这样代码结构相比styles更清晰、更易于管理。同理，模板推荐使用templateUrl引用模板文件。

changeDetection

ChangeDetectionStrategy.Default：组件的每次变化监测都会检查其内部的所有数据（引用对象也会深度遍历），以此得到前后的数据变化。

ChangeDetectionStrategy.OnPush：组件的变化监测只检查输入属性（即@Input修饰的变量）的值是否发生变化，当这个值为引用类型（Object，Array等）时，则只对比该值的引用。

显然，OnPush策略相比Default降低了变化监测的复杂度，很好地提升了变化监测的性能。如果组件的更新只依赖输入属性的值，那么在该组件上使用OnPush策略是一个很好的选择。

encapsulation

ViewEncapsulation.None：无 Shadow DOM，并且也无样式包装。

ViewEncapsulation.Emulated：无 Shadow DOM，但是通过Angular提供的样式包装机制来模拟组件的独立性，使得组件的样式不受外部影响，这是Angular的默认设置。

ViewEncapsulation.Native：使用原生的 Shadow DOM 特性。

生命周期

当Angular使用构造函数新建组件后，就会按下面的顺序在特定时刻调用这些生命周期钩子方法：

生命周期钩子 调用时机
ngOnChanges 在ngOnInit之前调用，或者当组件输入数据（通过@Input装饰器显式指定的那些变量）变化时调用。
ngOnInit 第一次ngOnChanges之后调用。建议此时获取数据，不要在构造函数中获取。
ngDoCheck 每次变化监测发生时被调用。
ngAfterContentInit 使用
ngAfterContentChecked ngAfterContentInit后被调用，或者每次变化监测发生时被调用（只适用组件）。
ngAfterViewInit 创建了组件的视图及其子视图之后被调用（只适用组件）。
ngAfterViewChecked ngAfterViewInit，或者每次子组件变化监测时被调用（只适用组件）。
ngOnDestroy 销毁指令/组件之前触发。此时应将不会被垃圾回收器自动回收的资源（比如已订阅的观察者事件、绑定过的DOM事件、通过setTimeout或setInterval设置过的计时器等等）手动销毁掉。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJs Understanding the Controller Component

    在angular中,controller是一个javascript 函数(type/class),被用作扩展除了root scope在外的angular scope(http://www.jb51.net/article/91749.htm)的实例.当我们或者angular通过scope.$new API(http://docs.angularjs.org/api/ng.$rootScope.Scope#$new)创建新的child scope时,有一个选项作为方法的参数传入controller

  • AngularJs Understanding the Model Component

    AngularJs Understanding the Model Component

    在angular文档讨论的上下文中,术语"model"可以适用于单一对象代表一个实体(例如,一个叫" phones"的model,它的值是一个电话数组.)或者作为应用的全部数据Model(所有实体). 在angular中,model可以是任意数据,可以通过angular的scope对象的属性来获取model.属性的名称是model的标识,值可以是任意javascript对象(包括数组和原始数据). javascript想成为model的唯一的条件是对象必须作为一个s

  • 剖析Angular Component的源码示例

    Web Component 在介绍Angular Component之前,我们先简单了解下W3C Web Components 定义 W3C为统一组件化标准方式,提出Web Component的标准. 每个组件包含自己的html.css.js代码. Web Component标准包括以下四个重要的概念: 1.Custom Elements(自定义标签):可以创建自定义 HTML 标记和元素: 2.HTML Templates(HTML模版):使用 <template> 标签去预定义一些内容,但

  • React Context原理深入理解源码示例分析

    目录 正文 一.概念 二.使用 2.1.React.createContext 2.2.Context.Provider 2.3.React.useContext 2.4.Example 三.原理分析 3.1.createContext 函数实现 3.2. JSX 编译 3.3.消费组件 - useContext 函数实现 3.4.Context.Provider 在 Fiber 架构下的实现机制 3.5.小结 四.注意事项 五.对比 useSelector 正文 在 React 中提供了一种「

  • 深入剖析Java ReentrantLock的源码

    目录 1. ReentrantLock的使用 2. ReentrantLock类结构 3. ReentrantLock源码解析 3.1 ReentrantLock构造方法 3.2 非公平锁源码 3.3 公平锁源码 4. 总结 ReentrantLock和Synchronized都是Java开发中最常用的锁,与Synchronized这种JVM内置锁不同的是,ReentrantLock提供了更丰富的语义.可以创建公平锁或非公平锁.响应中断.超时等待.按条件唤醒等.在某些场景下,使用Reentran

  • oracle数据与文本导入导出源码示例

    oracle提供了sqlldr的工具,有时需要讲数据导入到文本,oracle的spool可以轻松实现. 方便的实现oracle导出数据到txt.txt导入数据到oracle. 一.导出数据到txt 用all_objects表做测试 SQL> desc all_objects; Name Null? Type ----------------------------------------- -------- ---------------------------- OWNER NOT NULL

  • Java实现身份证号码验证源码示例分享

    整理文档,搜刮出一个Java实现身份证号码验证源码示例代码,稍微整理精简一下做下分享. package xxx; /** * Created by wdj on 2017/6/21. */ import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.Random; /** * 身份证验证的

  • Django动态随机生成温度前端实时动态展示源码示例

    Django动态随机生成温度前端实时动态展示源码示例

    目录 随机生成温度 前端动态实时 一.django APScheduler定时任务 简介 安装 使用步骤 基础组件 二.dwebsocket 简介 安装 使用方法 属性和方法 为了模拟随机的温度显示,在models中的表中的数据 views 路由 VUE中的代码 随机生成温度 前端动态实时 一.django APScheduler定时任务 简介 APScheduler的全称是Advanced Python Scheduler. 它是一个轻量级的 Python 定时任务调度框架. APSchedu

  • Python 装饰器常用的创建方式及源码示例解析

    目录 装饰器简介 基础通用装饰器 源码示例 执行结果 带参数装饰器 源码示例 源码结果 源码解析 多装饰器执行顺序 源码示例 执行结果 解析 类装饰器 源码示例 执行结果 解析 装饰器简介 装饰器(decorator)是一种高级Python语法.可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,相对于其它方式,装饰器语法简单,代码可读性高.因此,装饰器在Python项目中有广泛的应用.修饰器经常被用于有切面需求的场景,较为经典的有插入日志.性能测试.事务处理

  • go 压缩解压zip文件源码示例

    目录 压缩zip 解压zip 压缩zip func Zip(dest string, paths ...string) error { zfile, err := os.Create(dest) if err != nil { return err } defer zfile.Close() zipWriter := zip.NewWriter(zfile) defer zipWriter.Close() for _, src := range paths { // remove the tra

  • Flink 侧流输出源码示例解析

    Flink 侧流输出源码示例解析

    目录 Flink 侧流输出源码解析 源码解析 TimestampedCollector#collect CountingOutput#collect BroadcastingOutputCollector#collect RecordWriterOutput#collect ProcessOperator#ContextImpl#output CountingOutput#collect BroadcastingOutputCollector#collect RecordWriterOutput

  • JS前端操作 Cookie源码示例解析

    目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //

随机推荐