Angular 自定义双向绑定

ngModal 是 Angular 最常用接触到的双向绑定的语法。但是如何自定义一个双向绑定?在 Angular 中,我们可以很方便地使用内置语法来实现。

自定义双向绑定

双向绑定其实是属性绑定和事件绑定的语法糖。。若我们在组件中定义了这样两个形式的变量: @Input() xxx 和 @Output() xxxChange。

那么我们采用如下方式在这个组件上使用双向绑定语法。

Angular 在模板解析的时候会自动将此语法展开,如下所示。

(完)

参考链接

Create your own two-way data binding in Angular

Angular 动态创建与操纵组件

Angular 除了可以动态创建嵌入式视图 ,亦可利用现有的组件类动态在组件中创建一个组件。这种方法常用在弹出层、对话框等场景下。

组件与编译器

大部分场景下我们使用的组件都像普通元素一样放在组件的模板中。在浏览器执行时,Angular 编译器会对组件模板进行解析,对其中包含的组件、指令、管道等 Angular 自定义对象进行编译,转化为可直接运行的前端代码。可以说,编译器充当了框架与可执行代码之间的桥梁。

继续阅读Angular 动态创建与操纵组件

Angular 中 View 的那些事儿

Photo by Toa Heftiba on Unsplash

声明

Angular 视图是个神奇的存在,因为在官方文档中你很难寻觅到 View 这的身影,但是阅读源码,你却会发现 View 是 Angular 中举足轻重的一个概念。本文通过 MVVM 概念入手,讲解 View 在 MVVM 中的作用,以及在源码级别,Angular 如何实现它。

MVVM 架构

Angular 作为一套 MVVM 框架,通过 View 层来实现页面元素与数据的绑定,并由 ViewModel 层自动将数据的变化反应到视图上。

其中 ViewModel 层是由变化检测机制与 View 层配合实现的。而 View 作为一个中间结构,通过关联页面元素与数据让 ViewModel 层在变更检测阶段,对页面上绑定的数据进行更新。

阅读更多

Angular 指令快速入门

Photo by Daniel Radford on Unsplash

声明

本文重点不再讨论 Angular 中内置指令以及如何自定义指令。而是想让读者知道 Angular 中指令的作用,它解决了什么问题,以及指令与组件的区别。

何为指令

Angular 中指令是一个非常特殊的存在,从使用方法来看,指令类似元素的一个自定义属性,为元素或者组件提供特定的功能。在大多数场景下,指令不对作用的宿主元素本身的类型做任何假设,它无需知道宿主元素中包含了那些内容,宿主元素上有哪些属性,也不依赖宿主上的其他功能。换句话说,若我们想给 HTML 元素或者组件拓展某项功能,且这项功能相对独立,就可以采用指令来实现。

继续阅读Angular 指令快速入门

Angular 指令之 NgFor 教程

声明

NgFor 内建指令可以帮助开发者快速迭代某个数组来创建多个 DOM 元素。在实际开发中,我发现全面掌握 NgFor 的用法可以很好地帮助我们应对更加复杂的场景,甚至能实现性能的提升。此教程中涉及到了 Angular 变化检测机制的内容,对于这一部分感兴趣的朋友可以参看我其他的博文

继续阅读Angular 指令之 NgFor 教程

浅谈 Angular 变更检测机制

Photo by Roman Kraft on Unsplash

声明

变化检测(Change Detection)也叫脏值检测(Dirty Detection),都是指 Angular 中检测组件中数据变化的机制。由于变化检测与 Angular 若干生命周期有很强的关联,本文会结合两者做出说明。

继续阅读浅谈 Angular 变更检测机制

Angular NgIf 指令原理

Photo by Olivier Collet on Unsplash

声明

本节内容假设您具有基本的组件概念、了解 Angular 内置组件的基本用法以及结构型指令与属性型指令的区别。关于指令是什么/有什么作用,可以参看这篇指令二三问

前言

在 Angular 入门系列教程中,已经提到 Angular 的一些内建指令。其中利用内建的结构型指令,我们可以方便地来控制视图的创建和销毁。本文从 ngIf 源码入手,带你了解 ngIf 的解析过程、页面视图增删原理,从而掌握动态增删视图的基本方法。

继续阅读Angular NgIf 指令原理

Agular 组件交互(三)投影

Photo by Cristofer Jeschke on Unsplash

@Input @Output 解决了组件中控制层数据传递的问题,但是在很多场合,我们需要解决组件中视图层(模板)传递的问题。比如,我们希望将父组件的模板内容传递给子组件,由子组件进行展示或者处理。在 Angular 中,这种视图层(模板)传递的方法也被称为投影(Project)。

继续阅读Agular 组件交互(三)投影