依赖注入是一种将应用程序中的对象作为依赖关系传递到不同组件的设计模式。它创建一个新的类实例及其所需的依赖关系。依赖注入被刺激到框架中，可以在任何地方使用
Angular2的依赖注入
我们首先新建一个文件 app/classes/User.ts ,用来创建我们的User实例:
export class User{
constructor(
private name:string,
private age:number,
private email:string
){}
}一般情况下在Web应用中,我们要展示的数据都是从后台服务器动态获取的,所以我们来模拟一下这个过程;我们在这里就要使用服务的依赖注入了,我们首先创建文件user-data.mock.ts,路径是app/mock/user-data.mock.ts;
import {User} from "../classes/User";
export var Users:User[] = [
new User('dreamapple1', 21, '[email protected]'),
new User('dreamapple2', 22, '[email protected]'),
new User('dreamapple3', 23, '[email protected]'),
new User('dreamapple4', 24, '[email protected]'),
new User('dreamapple5', 25, '[email protected]'),
new User('dreamapple6', 26, '[email protected]')
]我们使用了User类来创建我们的数据,然后把创建的数据导出.
接下来我们要创建一个获取用户数据的服务,我们创建一个新的文件user.service.ts,路径app/services/user.service.ts:
import {Injectable} from '@angular/core';
import {Users} from "../mock/user-data.mock";
@Injectable()
export class UserService {
getUsers() {
return Users;
}
}大家关于上面的代码部分会有一些疑问,我们来给大家解释一下:首先我们使用了刚才我们创造的模拟数据Users;然后我们从@angular/core中导出了Injectable,就像我们从中导出Component一样;@Injectable()标志着一个类可以被一个注入器实例化;通常来讲,在试图实例化一个没有被标识为@Injectable()的类时候,注入器将会报告错误.上面的解释现在不明白不要紧,我们先学会如何使用;就像你不懂计算机原理一样可以把计算机玩得很溜一样.
我们接下来要在AppComponent组件中使用UserService了,需要注意的地方是:我们要在@Component的元数据中使用providers声明我们所需要的依赖,还要引入User类来帮助我们声明数据的类型.
import {UserService} from "./services/user.service";
import {User} from "./classes/User";
//...
@Component({
selector: 'my-app',
//template: 'My First Angular2 Travel
',
templateUrl: 'app/templates/app.html',
providers: [
UserService
]
})
export class AppComponent {
users: User[];
constructor(private userService: UserService) {
this.users = userService.getUsers();
}
}对上面代码的一些解释:我们使用providers: [UserService]来声明我们这个组件的依赖,如果没有这个选项,我们的程序会报错;然后我们给这个类添加一个属性users,同时声明这个属性的类型是一个含有User类实例的数组;最后我们在构造函数中又声明了一个私有的属性userService,它是UserService服务类的一个实例,我们可以用这个实例来获取users数据.
运行一下,然后我们就会看到下面的页面,表示一切成功.
如果这个时候你试图把user.service.ts的@Injectable注释掉的话,整个程序是没有报错的,但是我们建议为每个服务类都添加@Injectable(),包括那些没有依赖所以技术上不需要它的.因为:(1)面向未来,没有必要记得在后来添加了一个依赖的时候添加@Injectable().(2)一致性,所有的服务都遵循同样的规则,并且我们不需要考虑为什么少一个装饰器.《完》 更多查看上一篇
写依赖注入过程的记录，对比：
我们首先新建一个文件 app/classes/User.ts ,用来创建我们的User实例:
export class User{
constructor(
private name:string,
private age:number,
private email:string
){}
}然后我们在组件中引入这个类,然后创建我们的显示数据:
import {User} from "./classes/User";
// ...
export class AppComponent {
users: User[] = [
new User('dreamapple', 22, '[email protected]'),
new User('dreamapplehappy', 18, '[email protected]')
]
}别忘了在模板中添加一些展示数据使用的html代码:
依赖注入
-
用户的姓名: {
{user.name}}; 用户的年龄: {
{user.age}}; 用户的邮箱: {
{user.email}}
然后我们就会看到,在页面中显示出来了我们想要的那些数据:
另一种：
class Car{
private engine:Engine;
private tires:Tires;
constructor(){
this.engine = new Engine();
this.tires=new Tires();
}
}e
class Car{
private engine:Engine;
private tires:Tires;
constructor(engine: Engine, tires: Tires) {
this.engine = engine;
this.tires = tires;
}
}
var car = new Car(new Engine(), new Tires());