原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html

作者:Christoph Burgdorf

译者注:文章内容比较老,控制台信息等与新框架不完全一致,理解思路即可。

一. 问题点在哪里

先做一个小声明,我们现在拥有一个AppComponent,并使用DI系统向其中注入了一个NameService,因为我们使用的是Typescript,所以需要做的工作就是在构造函数的参数中声明变量nameService的类型为NameService,这样做的目的是为了向Angular提供运行时解析依赖所需要的相关信息。

app.ts

import { Component } from '@angular/core';
import { NameService } from './name.service'; @Component({
selector: 'my-app',
template: '<h1>Favourite framework: {{ name }}</h1>'
})
class AppComponent {
name: string; constructor(nameService: NameService) {
this.name = nameService.getName();
}
}

nameService.ts

export class NameService {
getName () {
return "Angular";
}
}

上述代码是可以正常工作的,如果我们将nameService.ts中的代码直接嵌入app.ts时,会产生哪些变化呢?别着急反对,先听听我希望声明的问题点。

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

@Component({
selector: 'my-app',
template: '<h1>Favourite framework: {{ name }}</h1>'
})
class AppComponent {
name: string; constructor(nameService: NameService) {
this.name = nameService.getName();
}
} class NameService {
getName () {
return "Angular";
}
}

当我们试图运行上面的代码时,它并未能够正常工作。但是在控制台上却无法得到报错信息,我猜想是因为调试Typescript代码时使用了source map。无论如何,当我们在调试器中打开Pause on caught exceptions功能时,就会在Angular框架中捕获这个错误:

Cannot resolve all parameters for AppComponent(undefined). Make sure they all have valid type or annotations

错误信息显示,AppComponent的构造函数在被调用时,同一个文件中声明的NameService类型的变量是undefined。这个错误提示是合理的,因为我们在定义NameService之前就在AppComponent的构造函数中使用了它,但是另一方面来看,在普通的ES5代码中就不会出现报错,因为函数声明会被Js解释器提升至作用域头部,不是说ES6仅仅是ES5的语法糖么?

那如果我们将NameService的定义代码进行提前,会出现什么情况呢:

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

class NameService {
getName () {
return "Angular";
}
} @Component({
selector: 'my-app',
template: '<h1>Favourite framework: {{ name }}</h1>'
})
class AppComponent {
name: string; constructor(nameService: NameService) {
this.name = nameService.getName();
}
}

此时它似乎可以正常工作了。那么问题来了:

Javascript解释器进行这样的改动意义何在呢?

二. 不对Class定义进行提升的理由

先来理解一下Javascript语言的机制,Javascript解释器不进行类的提升,是因为变量提升会导致在使用extend关键字实现继承时会导致错误,例如当被继承者是一个合法的函数表达式时。来看这样一段ES6代码:

class Dog extends Animal {

}

function Animal() {
this.move = function () {
alert(defaultMove);
}
} var defaultMove = "moving"; var dog = new Dog();
dog.move();

上述代码是能够正常工作的,因为Javascript解释器对其进行了提升重组,实际相当于如下代码:

var defaultMove, dog;

function Animal() {
this.move = function () {
alert(defaultMove);
}
} class Dog extends Animal { } defaultMove = "moving"; dog = new Dog();
dog.move();

然而,如果将Animal从一个函数声明改变成一个函数表达式时,它是不会被提升的。

//将函数声明改变为函数表达式
class Dog extends Animal { } var Animal = function Animal() {
this.move = function () {
alert(defaultMove);
}
} var defaultMove = "moving"; var dog = new Dog();
dog.move();

提升后的真实执行顺序如下,函数表达式并没有被提升:

var Animal, defaultMove, dog;

class Dog extends Animal {

}

Animal = function Animal() {
this.move = function () {
alert(defaultMove);
}
} defaultMove = "moving"; dog = new Dog();
dog.move();

如果函数表达式也被提升,那么当Dog类继承Animal类时就会报错,因为它还没有被声明。从上面的示例中不难看出,如果Javascript解释器对class声明也进行提升处理,就容易在类继承时出现基类未定义的错误。

三. class在使用前必须声明吗?

我们理解了class为什么不适合被提升执行顺序,这对于之前的Angular的示例来说有什么指导意义呢?我们只能通过将NameService移动到代码顶部的方式来解除之前的报错吗?

答案是我们可以使用另一种解决方案。我们使用@Inject注解和forwardRef函数来替代之前方式,也就是声明一个NameService类型的参数nameService,如下所示:

import { Component, Inject, forwardRef } from '@angular/core';

@Component({
selector:'my-app',
template:'<h1>Favourite framework:{{ name }}</h1>'
})
class AppComponent{
name: string; constructor(@Inject(forwardRef(()=> NameService)) nameService){
this.name = nameService.getName();
}
} class NameService{
getName(){
return "Angular"
}
}

forwardRef所做的工作,就是接收一个函数作为参数,然后返回一个class,因为这个函数并不是立即被调用的,而是在NameService声明之后才会安全地返回NameService,也就是说当()=>NameService执行的时候,NameService的值已经不是undefined了。

四. 小结

这个场景并不会经常出现,一般它只在当我们想要注入在同一个文件中声明的类时才会发生,大多数情况下我们在一个文件中只会声明一个类,并且会在文件的头部引入其他依赖的类,以此来保证不会被class不进行变量提升的特性造成困扰。

五.补充

以下内容摘录自Angular中文网:

在Typescript里面,类声明的顺序很重要,如果一个类尚未定义,就不能引用它。

这通常都没有问题的,特别是遵循一个文件一个类规则的时候。但有时候循环引用可能无法避免,当类A引用类B,同时B又引用A时,就会陷入困境:它们中的某一个必须先定义。

forwardRef( )建立一个间接引用,供Angular随后解析。

【Angular专题】——(2)【译】Angular中的ForwardRef的更多相关文章

  1. [译] Angular 2 VS. React: 血色将至

    Angular 2 VS. React: 血色将至 原文链接:https://medium.com/@housecor/angular-2-versus-react-there-will-be-blo ...

  2. angular.js和vue.js中实现函数去抖(debounce)

    问题描述 搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等. 学过电子电路的同学应该知道按键防抖.原理是一样的:就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用 ...

  3. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  4. angular学习笔记02 angular指令大全

    第一步 先要引入angular, 第二步  在 html 标签中<html  ng-app>  加入ng-app(这是个必须的,不然会报错) 接下来就可以去使用angular的各种指令了. ...

  5. Angular学习笔记:Angular CLI

    定义 Angular CLI:The Angular CLI is a command line interface tool that can create a project, add files ...

  6. angular enter事件,angular回车事件

    angular回车键搜索,angular enter搜索 对于搜索框,用户在输入内容后的搜索习惯不是鼠标点击搜索按钮,而是直接按enter键,那我们怎么给enter键绑定事件呢,其实很简单,代码如下: ...

  7. Angular 6.X CLI(Angular.json) 属性详解

    Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在an ...

  8. Angular总结二:Angular 启动过程

    要弄清楚 Angular 的启动过程,就要弄明白 Angular 启动时加载了哪个页面,加载了哪些脚本,这些脚本做了哪些事? 通过 Angular 的编译依赖文件 .angular-cli.json ...

  9. Angular系列一:Angular程序架构

    Angular程序架构 Angular程序架构 组件:一段带有业务逻辑和数据的Html服务:用来封装可重用的业务逻辑指令:允许你向Html元素添加自定义行为模块: 环境搭建 安装nodeJs安装好no ...

  10. Angular 2 升级到 Angular 5

    Angular 2 升级到 Angular 5 ts文件最上面的import语句里不要添加 .ts 后缀 , 不然 npm start 编译会失败 . 虽然浏览器能打开项目的URL , 但是内容会丢失 ...

随机推荐

  1. Java-IO流之File操作和Properties操作

    java的File类主要是用来操作文件的元数据,稍作演示如下: 其中方法getAllJavaFile()是使用了过滤器FileFileter,这个过滤器只需要实现accept方法,判断什么样的文件返回 ...

  2. ARouter基础使用(一)

    一个用于帮助 Android App 进行组件化改造的框架 —— 支持模块间的路由.通信.解耦1.新建一个Android项目 "ARouterDemo"2.添加依赖和配置 andr ...

  3. 【原创】XAF Winfrom 支持4K分辨率

    Program.cs 添加以下代码 [STAThread] static void Main() { //支持4K显示 DevExpress.XtraEditors.WindowsFormsSetti ...

  4. xpath使用方法

    一.选取节点常用的路劲表达式: 表达式 描述 实例   nodename 选取nodename节点的所有子节点 xpath(‘//div’) 选取了div节点的所有子节点 / 从根节点选取 xpath ...

  5. layui layer弹框中表格的显示

    场景描述:点击iframe里面的一个按钮,需要在父级弹出一个弹框表格. 问题描述:这个弹框的分页不能正常显示,如果把layer.open前面的parent去掉,就可以正常显示. 代码展示: paren ...

  6. Get API

    根据索引.类型和ID获取文档 GET twitter/_doc/1 返回结果如下: { "_index": "twitter", "_type&quo ...

  7. php 跨数据库调取数据

    我的这个是thinkphp,我就在 Application -> Common -> Conf -> config.php 文件里面配置数据库的地方,加入了下面这段代码 //'数据库 ...

  8. python穷举法解数独

    总体思路 : 数独九行九列,一个list装一行,也就需要一个嵌套两层的list 初始会有很多数字,我可不想一个一个赋值 那就要想办法偷懒啦 然后再是穷举,如何科学的穷举 第一部分:录入 某在线数独网站 ...

  9. web项目 easyui-datagrid开发实践

    一,引言 工作的需要,做了3年的wpf(mvvm)……,又因为项目的需求,回归到web的开发. ■  3 years ago,vue是我三年前没用过的玩意儿. ■  3 years ago,boots ...

  10. java 23种设计模式 深入理解【转】

    以下是学习过程中查询的资料,别人总结的资料,比较容易理解(站在各位巨人的肩膀上,望博主勿究) 创建型抽象工厂模式 http://www.cnblogs.com/java-my-life/archive ...