目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注...

目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注...

目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注...

目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注...

目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注...

NgForOf 指令作用 该指令用于基于可迭代对象中的每一项创建相应的模板。每个实例化模板的上下文对象继承于外部的上下文对象，其值与可迭代对象对应项的值相关联。 NgForOf 指令语法 * 语法糖 {代码...} template语法 {代码...} <ng-template> 元素 {代码...} NgForOf 使用示例 {代码...} 基础知识 NgForOfContext ...

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

NgIf 指令作用 ngIf 指令用于根据表达式的值，在指定位置渲染 then 或 else 模板的内容。 then 模板除非绑定到不同的值，否则默认是 ngIf 指令关联的内联模板。 else 模板除非绑定对应的值，否则默认是 null。 NgIf 指令语法 简单形式 {代码...} 使用else块 {代码...} 使用then和else块 {代码...} 使用as语法 {代码...} ...

NgModule 是你使用 Angular 编写应用程序时遇到的第一个基本结构，但由于涉及不同的作用域范围，它也是最微妙和最复杂的。如果你想详细了解 NgModule 的相关知识，可以直接参考 Angualr NgModule FAQ 或 Angular FAQ 文章中 NgModule 版块的内容 。

什么是结构指令？ 结构指令通过添加和删除 DOM 元素来更改 DOM 布局。Angular 中两个常见的结构指令是 *ngIf 和 *ngFor。 了解 * 号语法 * 号是语法糖，用于避免使用复杂的语法。我们以 *ngIf 指令为例： (图片来源：[链接] Angular 把 host (宿主元素) 包装在 template 标签里面 Angular 将 ngIf 转换为属性绑定 - [ngI...

在软件工程中，依赖注入是种实现控制反转用于解决依赖性设计模式。一个依赖关系指的是可被利用的一种对象（即服务提供端） 。依赖注入是将所依赖的传递给将使用的从属对象（即客户端）。该服务是将会变成客户端的状态的一部分。 传递服务给客户端，而非允许客户端来建立或寻找服务，是本设计模式的基本要求。 —— 维基百科

建了个群有兴趣的朋友可以加一下 QQ 群：Angular 修仙之路(1)群 - 153742079 (已满)，请加 Angular 修仙之路(2)群 - 648681235。

如果你需要使用动态值生成链接地址，你可以传递一个路径片段 (segments) 的数组，然后再传递每个段的参数。例如使用 ['/team', teamId, 'user', userName, {details: true}] 数组，意味着我们想要生成一个链接到 /team/11/user/bob;details=true 。

只读的，其值为一个整数，标志包括当前页面在内的会话历史中的记录数量，比如我们通常打开一个空白窗口，length 为 0，再访问一个页面，其 length 变为 1。

在阅读本文之前，请确保你已经掌握 Angular 响应式表单和动态创建组件的相关知识，如果对相关知识还不了解，推荐先阅读一下 Angular 4.x Reactive Forms 和 Angular 4.x 动态创建组件 这两篇文章。对于已掌握的读者，我们直接进入主题。

上面代码中，我们定义了一个简单的 alert 组件，该组件有一个输入属性 type ，用于让用户自定义提示的类型。我们的自定义组件最终是一个实际的 DOM 元素，因此如果我们需要在页面中插入该元素，我们就需要考虑在哪里放置该元素。

Angular 在解析 DOM 树的时候，对于事件绑定它会调用 DomRenderer 实例的 listen() 方法，进行事件绑定，listen() 方法具体实现如下：

Angular 组件和 DOM 元素通过事件与外部进行通信， Angular 事件绑定语法对于组件和 DOM 元素来说是相同的 - (eventName)="expression" ：

在 Angular 4.x 中对于使用 Template-Driven 表单场景，如果需要实现表单数据绑定。我们就需要引入 ngModel 指令。该指令用于基于 domain 模型，创建 FormControl 实例，并将创建的实例绑定到表单控件元素上。

近期回答了 SF 上和 QQ 群里面的一些问题，发现一些问题对初学者来说，都可能会遇到。个人精力有限，建了个群有兴趣的朋友可以加一下 QQ 群：Angular 修仙之路(1)群 - 153742079 (已满)，请加 Angular 修仙之路(2)群 - 648681235。一起维护这个 FAQ 哈！此外该文章也会持续更新，希望有兴趣的读者多提建议哈，谢谢！

在 Angular 4.x 中有多种方式可以更新表单的值，对于使用响应式表单的场景，我们可以通过框架内部提供的 API ，(如 patchValue 和 setValue )方便地更新表单的值。这篇文章我们将介绍如何使用 patchValue 和 setValue 方法更新表单的值，此外还会进一步介绍它们之间的差异。

当我们打算自定义表单控件前，我们应该先考虑一下以下问题： 是否已经有相同语义的 native (本机) 元素？如：<input type="number"> 如果有，我们就应该考虑能否依赖该元素，仅使用 CSS 或渐进增强的方式来改变其外观/行为就能满足我们的需求？ 如果没有，自定义控件会是什么样的？ 我们如何让它可以访问 (accessi...

表单是几乎每个 Web 应用程序的一部分。虽然 Angular 为我们提供了几个内置 validators (验证器)，但在实际工作中为了满足项目需求，我们经常需要为应用添加一些自定义验证功能。接下来我们将着重介绍，如何自定义 validator 指令。

Angular 为我们提供了多种方式和 API，进行表单验证。接下来我们将介绍如何利用 AbstractControl 实现 FormGroup 的验证。文章中会涉及 FormGroup 、FormControl 和 FormBuilder 的相关知识，因此建议不了解上述知识的读者，阅读本文前先阅读 Angular 4.x Reactive Forms 这篇文章。

Angular 4.x 中有两种表单： Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) Reactive Forms (Model-Driven Forms) - 响应式表单 Template-Driven Forms (模板驱动表单) ，我们之前的文章已经介绍过了，了解详细信息，请查看 - Angular 4.x Template-Driven Forms 。 Contents ngModule and ...

本文主要介绍 Template-Driven Forms (模板驱动式表单) ，将涉及 ngForm、ngModel、ngModelGroup、表单提交事件、表单验证和异常信息输出等内容。

更新时间 - 2017-04-20 更新内容 - Connection致命逻辑错误，感谢 深圳-shadows 刊误 有点小鸡冻，我们 HttpModule 系列的主角终于要出场了。此时突然想起了一句诗： 千呼万唤始出来,犹抱琵琶半遮面。 —— 白居易 <<琵琶行>> 为了写好这篇文章 (写得不好的话，大家请见谅)，考虑了一番，最终还是打算先写相关...

本文的主要内容是介绍父子组件通信时，如何传递异步的数据。我们将通过一个具体的示例，来介绍不同的处理方式。假设我们有一个博客组件，用来显示博主信息和分类的帖子列表信息。具体如下图所示：

Metadata：如 @Input()、@Output()、@ContentChild/Children、@ViewChild/Children 等。在派生类中定义的元数据将覆盖继承链中的任何先前的元数据，否则将使用基类元数据。

本文介绍的内容是组件通信的常用方式：@Input、@Output、@ViewChild、模板变量、MessageService、Broadcaster (Angular 1.x $rootScope 中 $on、$broadcast ) 和 Pub - Sub 模式、RxJS Subject 存在的问题。