angular - No provider for... 使用使用其他自定义服务的服务时出错

Question

所以，我们正在谈论 angular2，我知道它仍处于 alpha 阶段。我创建了一个基础服务，我将在另一个服务中使用它。然后在组件中使用后者。

基本服务看起来像这样

import {Injectable, Observable} from 'angular2/core';
import {Http} from 'angular2/http';
import {RequestOptionsArgs, Connection, ConnectionBackend} from 'angular2/http';
import {BaseRequestOptions, RequestOptions} from 'angular2/http';
import {RequestMethods} from 'angular2/http';
import {Response} from 'angular2/http';
import {Request} from 'angular2/http';
import {makeTypeError} from 'angular2/src/facade/exceptions';

@Injectable()

export class MyOAuth extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  /**
   * Performs any type of http request. First argument is required, and can either be a url or
   * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions}
   * object can be provided as the 2nd argument. The options object will be merged with the values
   * of {@link BaseRequestOptions} before performing the request.
   */
  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    var responseObservable: any;
    if (isString(url)) {
      responseObservable = httpRequest(
          this._backend,
          new Request(mergeOptions(this._defaultOptions, options, RequestMethods.Get, url)));
    } else if (url instanceof Request) {
      responseObservable = httpRequest(this._backend, url);
    } else {
      throw makeTypeError('First argument must be a url string or Request instance.');
    }
    return responseObservable;
  }
}

使用上述服务的另一个服务如下所示 (authenticate.js):

import {Injectable, Inject} from 'angular2/angular2';
import {MyOAuth} from './MyOAuth';


@Injectable()

export class AuthenticationService {

  constructor(@Inject(MyOAuth) http) {
    this.http = http;
  }

  authenticate(username, password, community) {
    console.log('authenticate');
  }
}

然后在类里面使用这个服务，我这样调用它:

import {Page} from 'ionic/ionic';
import './login.scss';
import {AuthenticationService} from '../../services/authentication';

@Page({
  templateUrl: 'app/login/login.html',
  providers: [AuthenticationService] //As of alpha 42
})

我在浏览器中得到的错误是

EXCEPTION: No provider for MyOAuth! (LoginPage -> AuthenticationService -> MyOAuth)

在我看来，我还必须导入 MyOAuth 似乎不对...

Answer 1

当您需要将自定义服务注入(inject)到其他服务中时，您需要在更大的上下文(组件、页面、应用程序)中提供服务

你可以这样做:

import {Page} from 'ionic/ionic';
import './login.scss';
import {AuthenticationService} from '../../services/authentication';

@Page({
    templateUrl: 'app/login/login.html',
    providers: [[AuthenticationService], [MyOAuth]]
})

对我来说，如果服务可以在多个地方重用，我总是在应用上下文中定义它。例如:

@Component({
    templateUrl: 'build/app.html',
    providers: [[AuthenticationService], [MyOAuth]]
})
class MyApp{
}

因此这些服务只会被实例化一次。如果您提供它们，例如:Page1，Page2，它们将被实例化两次