angular 2 中可以注入接口吗?如何实现?

答:不能,因为TypeScript的接口是设计时的, JavaScript没有接口。 TypeScript代码​​从生成的JavaScript过程中消失。没有任何接口类型信息可供Angular在运行时查找。

有两个方案可以实现:

1、方案1:
最简单的解决方案就是定义一个实现接口的抽象类。通常,无论如何你都需要一个抽象类。

定义接口:

import {Role} from "../../model/role";

export interface ProcessEngine {

     login(username: string, password: string):string;

     getRoles(): Role[];
}

抽象类:

import {ProcessEngine} from "./process-engine.interface";

export abstract class ProcessEngineService implements ProcessEngine {

    abstract login(username: string, password: string): string;

    abstract getRoles(): Role[];

}

实现类:

import { Injectable } from '@angular/core';
import {ProcessEngineService} from "./process-engine.service";

@Injectable()
export class WebRatioEngineService extends ProcessEngineService {

    login(username: string, password: string) : string {...}

    getRoles(): Role[] {...}

}

定义provider:

@NgModule({
      ...
      providers: [
        ...,
        {provide: ProcessEngineService, useClass: WebRatioEngineService}
      ]
})

2、方案2:Angular的官方文档建议使用InjectionToken,类似于OpaqueToken。

Your interface and class:

export interface AppConfig {
   apiEndpoint: string;
   title: string;
}

export const HERO_DI_CONFIG: AppConfig = {
  apiEndpoint: 'api.heroes.com',
  title: 'Dependency Injection'
};

Define your Token:

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

export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');

使用InjectionToken对象注册依赖项提供程序

providers: [{ provide: APP_CONFIG, useValue: HERO_DI_CONFIG }]

你可以通过@Inject装饰器将配置对象注入任何需要它的构造函数中:

constructor(@Inject(APP_CONFIG) config: AppConfig) {
     this.title = config.title;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实时更新Ionic Badge的计数,你需要使用一个定时器来定期调用接口获取最新的计数,并将其更新到Badge上。 以下是一个简单的实现示例: 1. 在你的组件引入 `Badge` 和 `IntervalObservable`: ```typescript import { Component } from '@angular/core'; import { Badge } from '@ionic-native/badge/ngx'; import { IntervalObservable } from 'rxjs/observable/IntervalObservable'; ``` 2. 在构造函数注入 `Badge` 并设置初始的计数值: ```typescript constructor(private badge: Badge) { this.badge.set(0); // 初始值为0 } ``` 3. 在 `ionViewDidEnter` 生命周期钩子启动定时器: ```typescript ionViewDidEnter() { this.startTimer(); } ``` 4. 实现 `startTimer` 方法来启动定时器并定期调用接口获取最新的计数值: ```typescript startTimer() { IntervalObservable.create(5000) // 每隔5秒钟调用一次接口 .subscribe(() => { // 调用接口获取最新的计数值 this.getCount().subscribe(count => { // 更新Badge的值 this.badge.set(count); }); }); } getCount() { // 调用接口获取最新的计数值 // 例如:返回一个Observable对象 return this.http.get('https://example.com/count'); } ``` 5. 在 `ionViewWillLeave` 生命周期钩子停止定时器: ```typescript ionViewWillLeave() { this.stopTimer(); } stopTimer() { this.timerSubscription.unsubscribe(); } ``` 注意:在 `startTimer` 方法,我们订阅了 `IntervalObservable` 并调用了 `getCount` 方法来获取最新的计数值。在 `getCount` 方法,你可以使用 `HttpClient` 或任何其他HTTP客户端来调用接口。 当你在页面调用 `push` 或 `pop` 导航时,`ionViewDidEnter` 和 `ionViewWillLeave` 生命周期钩子将被触发。因此,在这些钩子启动和停止定时器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值