在Angular中注入通用服务

前端之家收集整理的这篇文章主要介绍了在Angular中注入通用服务前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果使用不同的类型跨组件构造函数调用Angular,它会注入一个以上的通用服务实例吗?

我有很多服务会为不同的类提供相同的功能,这些类都继承自同一个基类.我想使用Typescript的通用模式MyService< T extends BaseClass>处理这个.

但是我不知道它是如何与Angular的注射器混在一起的:

>如果将Angular注入器注入具有不同类型的不同组件,它是否会创建多个此服务实例?
>如果使用相同的类型调用它,注入器是否会注入相同的实例?

码:

@Injectable
export class MyService<T> {
    ...
}

@Component
export class ComponentA {
    constructor(alphaService MyService<Alpha>) {}   <--Instance 1
}

@Component
export class ComponentB {
    constructor(betaService MyService<Beta>) {}   <----Instance 2?
}

@Component
export class ComponentA1 {
    constructor(alphaService MyService<Alpha>) {}  <---Instance 1?
}

这合法吗?注射器是否知道创建两个MyService实例?

这是一个简单的解决方案:
// service and models
export class User{
    firstName:string
}
export class Admin{
    lastName:string
}

@Injectable()
export class GenericService<T>{
    item:number = Math.random();
    GetAll():Array<T> {
        let output = [];
        console.log(this.item); // each instance has own value
        return output;
    }
}

然后通过useFactory在模块中设置您的服务:

providers: [
        {provide:'UserService',useFactory:()=>(new GenericService<User>())},{provide:'AdminService',useFactory:()=>(new GenericService<Admin>())},],

并使用@Inject装饰器注入您的服务:

constructor(@Inject('UserService') private userService:GenericService<User>,@Inject('AdminService') private adminService:GenericService<Admin>
    ) { }

请记住,最好为您的提供者令牌使用InjectionToken(OpaqueToken已弃用).为了简单起见,我使用了字符串.

原文链接:https://www.f2er.com/angularjs/142223.html

猜你在找的Angularjs相关文章