标签: angular2-providers

在Angular2组件中,配置providers是我们可以指定的密钥之一.这些提供商是如何定义的以及它们用于什么？

@Component({
  ..
  providers: [..],
  ..
})

注意:

Angular2文档逐渐成熟,但仍然很少.它目前将提供商定义为:

一组依赖注入提供程序,用于组件所需的服务.

这种递归定义不是很有用.用一个例子做一个更详细的解释真的会有所帮助.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ClinicFacilityService } from './apiClient.module';


@NgModule({
  imports: [
    CommonModule,
    FormsModule
  ],
  declarations: [
    DailyScheduleComponent,
  ],
  providers: [
    ClinicFacilityService
  ],
  exports: [
    DailyScheduleComponent
  ],
})
export class ClinicDashboardModule {
}

我需要导入ClinicFacilityService在另一个模块中声明的(apiClient.module)

这是否可能,如果不是为什么不可能.目前我正在这样导入ClinicFacilityService:

import { ClinicFacilityService } from './api-client-service/clinic-facility.service';

我一直在关注本教程,了解延迟加载,下面是我的推断.

场景1:通过将它们放在providers子模块的数组中来提供服务

场景2:使用该forRoot方法在子模块中提供服务

方案1在上下文中,

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.
• 如果延迟加载子模块,则将服务的实例添加到根注入器,并将新服务实例添加到子注入器,这不是通常的用例.

在上下文中使用方案2

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.

• 如果延迟加载子模块,则在根模块和子模块中都可以使用相同的服务实例,这是通常的用例.

他们提到了以下内容.

一开始,

因此,即使使用模块,也无法拥有"私有"服务,除非......模块正在延迟加载.

最后,

尽管此语法比原始语法更复杂,但它将保证我们只将一个CreditCardService实例添加到根模块.加载CreditCardModule(甚至延迟加载)时,不会将该服务的新实例添加到子注入器.

如果实例也将在根注入器中可用,那么他们如何表示该服务被"私有化"？

我糊涂了.有人请澄清一下.

只是无法弄清楚为什么我仍然得到这个缺少的Headers提供商问题.

我的bootstrap.ts:

import {enableProdMode, provide} from "angular2/core";
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';

const ENV_PROVIDERS = [];
// depending on the env mode, enable prod mode or add debugging modules
if (process.env.ENV === 'build') {
  enableProdMode();
} else {
  ENV_PROVIDERS.push(ELEMENT_PROBE_PROVIDERS);
}

/*
 * App Component
 * our top level component that holds all of our components
 */
import {App} from './app/app';

/*
 * Bootstrap our Angular app with a top …

简介:我正在尝试将Angular2 AoT用于我的Angular2应用程序,但由于我有静态提供程序将一些值从服务器传递给Angular2,因此ngc显示了一些错误.我的问题是如何ngFactory使用创建的文件ngc.

详细信息:我正在使用食谱指南,并运行"node_modules/.bin/ngc" -p tsconfig-aot.json显示以下错误:

Error: Cannot determine the module for component AppComponent!
    at F:\workspace\node\my-project\node_modules\@angular\compiler\bundles\compiler.umd.js:12839:25
    at Array.map (native)
    at OfflineCompiler.compile (F:\workspace\node\my-project\node_modules\@angular\compiler\bundles\compiler.umd.js:12835:31)
    at F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\codegen.js:108:18
    at Array.map (native)
    at CodeGenerator.codegen (F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\codegen.js:106:38)
    at codegen (F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\main.js:7:81)
    at Object.main (F:\workspace\node\my-project\node_modules\@angular\tsc-wrapped\src\main.js:30:16)
    at Object.<anonymous> (F:\workspace\node\my-project\node_modules\@angular\compiler-cli\src\main.js:14:9)
    at Module._compile (module.js:541:32)
Compilation failed

tsconfig-aot.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings" …

我正在尝试测试使用其他服务的组件.我想通过为服务提供模拟来隔离组件.在RC5之前,我可以简单地使用addproviders现在已经弃用的,并且将被下一个RC删除.相反,我必须使用TestBed.当我因某种原因提供模拟角度时,请继续寻找模拟所依赖的服务.然后抛出一个DI exception.当我提供所有依赖项时,测试工作,但我不想为每个测试套件重复自己.这打破了基本的OO原则.我的测试套件:

describe('Component: DummyRestApi', () => {

  class DummyRestApiTestService {

    GetAll() {

      return Rx.Observable.create(observer => {

        let data:Data[] = [];

        data.push({
          id: 0,
          data: 'data'
        });

        observer.next(data);
        observer.complete();

      });
    }

    Add(data) {
    }
  }
  let fixture;
  let myMockWindow:Window;
  // ToDo use the mocks
  beforeEach(() => {
    myMockWindow = <any> {location: <any> {hostname: '127.0.0.1'}};
    TestBed.configureTestingModule({
      declarations: [DummyRestApiComponent],
      providers: [
        // ServerAddressResolverService,
        DummyRestApiComponent,
        // ConfigurationService,
        {provide: DummyRestApiService, useClass: DummyRestApiTestService},
        // {provide: Window, useValue: myMockWindow}
      ],
      imports: …

我在我的应用程序中使用子组件的延迟加载策略.在应用程序的顶层,我有自定义HTTP提供程序,它拦截所有ajax调用.

    providers:[{
        provide: Http,
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, cookieService: CookieService) => new CustomHttp(backend, defaultOptions, cookieService),
        deps: [XHRBackend, RequestOptions, CookieService]
    }]

我的延迟加载模块不会影响此自定义提供程序.有没有办法为他们提供？没有providers在component.module文件中的属性中重复代码.谢谢!

假设我们导入一个Angular Material模块:

 providers:[],
 imports : [MaterialInput]

在里面MaterialInput,有一个名为MaterialInputComponent的组件

出于某些原因,我想用自己的方法覆盖该组件

所以我希望能够说:

 providers:[
    {
       provide: MaterialInputComponent,
       useClass : MyOwnInputComponent
    }
 ],
 imports : [MaterialInputModule]

我知道我们可以覆盖这样的服务,但是它也可以用于组件或指令吗？

更新:我不是在寻找组件继承,我想要的是使用类似的东西,Material Module但有时我想覆盖它的组件行为,就像你使用服务一样.

喜欢 :

如果这是MaterialInput组件背后的原始代码,它位于我的节点模块中.

  @Component({})
  export class OriginalMaterialInputComonent{
        greet(){ alert('Say Aloo'); }
  }

我有一个类似的类:

  @Component({})
  export class OverrideMaterialInputComonent{

        greet(){ alert('Say yes we can'); } // overriden function
  }

并且,假设我正在导入空洞MaterialInputModule

declarations:[
   {
    provide: OriginalMaterialInputComonent,
    useClass : OverrideMaterialInputComonent
  }
],
  imports : [MaterialInputModule]

那可行吗？

我已将我的分页逻辑放在一个单独的模块中并将其导入AppModule. 下面是我的分页模块和AppModule.

分页实用程序模块：

import { NgModule, ModuleWithProviders, Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import { OrderByPipe } from './order-by.pipe';
import { FilterPipe } from './filter.pipe';
import { SortByDirective } from './sort-by.directive';
import { PaginationComponent } from './pagination/pagination.component';
import { ServiceLocator } from './service-locator';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SortByDirective,
    PaginationComponent
  ],
  exports: [
    SortByDirective,
    PaginationComponent
  ]
})
export class PagingUtilitiesModule {
  constructor(private injector: Injector) {
    ServiceLocator.injector = this.injector;
  }

  static …

至少我以为我提供的正确.以下是我的app.module文件的相关片段以及我使用AuthHttp的服务.我按照自述文件中的配置创建了提供AuthHttp的工厂方法,但是在我的服务中无法识别它存在持续存在的问题.我已经阅读了有关嵌套依赖注入的文献,我觉得我正在做正确的事情.

app.module.ts

import { Http, RequestOptions } from '@angular/http';
import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt/angular2-jwt';

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig(), http, options);
}

@NgModule({
    declarations: [
        AppComponent,
        ButtonFormComponent,
...
imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule,
        AppRoutingModule
    ],
    providers: [
        {
            provide: LocationStrategy,
            useClass: HashLocationStrategy
        },
        {
            provide: AuthHttp,
            useFactory: authHttpServiceFactory,
            deps: [Http, RequestOptions]
        },

employee.service.ts

import { AuthHttp } from 'angular2-jwt/angular2-jwt';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import …