您的位置：首页 > Web前端 > AngularJS

Angular2组件开发—调用服务（二）

2015-12-16 19:47 741 查看

注入 - Injector

在前一节的示例代码中，组件EzAlgo直接在构造函数中实例化了一个EzAlog对象，这造成了EzApp和EzAlgo的强耦合，我们可以使用Angular2的注入器/Injector进行解耦：

注入器就像婚姻介绍所，男方在婚介所登记心仪的女性特点，约好见面地点，然后，坐等发货即可。比如上图：

EzApp组件（男方）使用Component注解的Injector属性向Angular2框架（婚介所）声明其依赖于EzAlgo（登记心仪的女性特点），并在其构造函数的参数表中使用Inject注解声明注入点（约好见面地点），然后，剩下的事儿Angular2（婚介所）就办了：

@Component({
selector : "ez-app",
//声明依赖
    appInjector : [EzAlgo]
 })
@View(...)
class EzApp{
//Angular2框架负责注入对象
constructor(@Inject(EzAlgo) algo){
//已经获得EzAlgo实例了！
}
}

例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>appInjector</title>
<script type="text/javascript" src="lib/system@0.16.11.js"></script>
<script type="text/javascript" src="lib/angular2.dev.js"></script>
<script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
<ez-app></ez-app>
<script type="module">
import {Inject,Component,View,bootstrap} from "angular2/angular2";
import {formDirectives,Control} from  "angular2/forms";

//定义一个简单的算法服务类
class EzAlgo{
add(a,b) { return a+b; }
sub(a,b) { return a-b; }
}

//组件定义
@Component({
selector : "ez-app",
 //appInjector : [EzAlgo]
})
@View({
directives:[formDirectives],
template : `
<form>
<input type="text" ng-control="a" [(ng-model)]="a">
+
<input type="text" ng-control="b" [(ng-model)]="b">
=
{{add()}}
</form>`,
styles:[`
*{font-size:30px;font-weight:bold;}
input{width:100px;}
`]
})
class EzApp{
//注入参数声明
            constructor(@Inject(EzAlgo) algo){
this.a = 37;
this.b = 128;
this.algo = algo;
}
add(){
var a = +this.a,
b = +this.b;
return this.algo.add(a,b);
}
}

bootstrap(EzApp,EzAlgo);
</script>
</body>
</html>

输出如下：

注意：不使用appInjector，在bootstrap函数中注入EzAlgo也是可行的，但他们之间存在区别，一个在全局注入，另一个是组件注入，它们的作用域不同。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航