标签: angular2-services

我即将使用多提供程序将依赖项的依赖项与其自身一起导出,这样它们就可以立即注入到组件中.

对于组件

import {Component} from 'angular2/core';
import { FOO_PROVIDERS } from './foo';

@Component({
  selector: 'app',
  providers: [FOO_PROVIDERS]
})
export class App {}

在以下

import {Inject, Injectable, provide} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';

export class Foo {
  constructor(@Inject(Http) http) {}
}

export const FOO_PROVIDERS = [
  provide(Foo, { useClass: Foo, multi: true }),
  provide(Foo, { useValue: HTTP_PROVIDERS, multi: true })
];

会导致

没有Http的提供者!(App - > Foo - > Http)

而且这个

import {Inject, provide} from 'angular2/core'; …

我正在尝试将src图像的属性绑定到如下所示的ngFor指令中：

<div *ngFor="imageId of imageIds">
  <img [attr.src]="imageSrc(imageId)" alt="{{imageId}}">
</div>

imageSrc组件内部的方法如下所示：

imageSrc(imageId: string){
  var hostUrl = "http://192.168.0.101:3000/";
  var imageUrl = hostUrl+"images/"+imageId;
  var imgSrc = "";

  this._imageService.getImage(imageId)
  .subscribe(image => {
    imgSrc = hostUrl + image.url
   });
  return imgSrc;
}

中的getImage函数Injectable ImageService如下所示：

getImage(id: string) {
  var _imageUrl = "http://192.168.0.101:3000/images/"+id;
  return this.http.get(_imageUrl)
  .map(res => <Image>res.json().data)
  .catch(this.handleError)
}

问题是，只有两个imageIds的*ngFor指令呈现两个列表项为预期（但没有图像显示），但在调用数据服务不会停止，它得到了什么似乎是一个无限循环结束，两个图像直到应用程序崩溃。我做错了什么？

我正在编写一个带有typescript 2.0.3的角度2.1.0项目.

我app-config使用以下代码创建了一个服务:

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

@Injectable()
export class AppConfigService {
  public config: any = {
    auth0ApiKey: '<API_KEY>',
    auth0Domain: '<DOMAIN>',
    auth0CallbackUrl: '<CALLBACK_URL>',
    appBaseHref: '/'
  }

  constructor() {}

  /* Allows you to update any of the values dynamically */
  set(k: string, v: any): void {
    this.config[k] = v;
  }

  /* Returns the entire config object or just one value if key is provided */
  get(k: string): any {
    return k ? this.config[k] : this.config;
  }
} …

我构建了一个Module拥有自己的服务和组件的 Angular ：

@NgModule({
  declarations: [ FileUploader],
  exports: [ FileUploader ],
  imports: [ CommonModule ],
  providers: [ FileService ],
})
export class FilesModule { }

和FileService：

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

@Injectable()
export class FileService
{
    constructor() {}

    uploadFile(file): Promise {
        return new Promise((resolve, reject) => {
            ...
        }
    }
}

然后我将它导入到我的AppModule：

@NgModule({
  declarations: [ AppComponent ],
  entryComponents: [ AppComponent ],
  imports: [ FilesModule ]
})
export class AppModule { }

当我注入FileService …

我的代码中有一个ngFor循环.在这个ngFor循环里面我有一个div,点击这个div我想把索引值传递给类型脚本文件.

我是Anglular 2的新手,我们将不胜感激.

例如:

`<div *ngFor="let y of characters;let i = index">
    <div (click)="passIndexValue()">
    </div>
<div>`

我有一个组件可以调用服务来查看是否已从另一个组件宣布订阅。

成分：

this.activateProcessReadySubscription =  this.returnService.processReadySubscriptionAnnouced$.subscribe(
            itemsInCart => {
                this.itemsInCart = itemsInCart;
            });

当我尝试对此进行测试时，出现错误：

类型错误：无法读取未定义的属性“订阅”

规格

it('should call constructor', fakeAsync(() => {
        mockReturnsService.setResponse(0, true);
        tick();
        fixture.detectChanges();
        expect(mockReturnsService.processReadySubscriptionAnnouced$Spy).toHaveBeenCalledTimes(1);
    }));

服务：

    private activateProcessReadySubscriptionSource = new Subject<number>();
    processReadySubscriptionAnnouced$ = this.activateProcessReadySubscriptionSource.asObservable();

    announceProcessReady(itemsInCart: number) {
        this.activateProcessReadySubscriptionSource.next(this.returnCartDataLength);
    }

我似乎无法弄清楚如何让订阅正确测试。

我在我的应用程序中使用谷歌地图 API，如下所示：

在 index.html 中使用 api 键导入 url ：

<script src="https://maps.googleapis.com/maps/api/js?key=myKey"></script>

并在组件中像这样声明谷歌：

declare let google: any;

并在这样的组件中使用它：

this.map = new google.maps.Map(document.getElementById('googleMap'), this.mapProp);

如何动态更改 index.html 中存在的 API 密钥？

我正在尝试测试 HTTP 调用并参考以下页面来编写单元测试：https://angular-2-training-book.rangle.io/handout/testing/services/mockbackend.html

但是当我查看 Angular 网站时，该类似乎MockBackend已被弃用：https://angular.io/api/http/testing/MockBackend

同一网站有不同的方法来测试 HTTP 调用：https://angular-2-training-book.rangle.io/handout/testing/services/alt-http-mocking.html

我还发现了下面一篇有趣的文章（因为我正在尝试测试登录，因此进行 POST 调用）：http://jasonwatmore.com/post/2016/11/24/angular-2-mockbackend-example-for-backendless -发展

所以我想知道测试 HTTP 调用的最佳或最新方法是什么？我有点困惑是否使用MockBackend或使用spyOn模拟策略。

我想检查哪个组件/服务正在调用某个服务的方法，而不传递额外的参数。这需要在服务中检查。请提及是否有任何方法可以做到这一点。

我有AppModule和LazyLoadedModule。我想要从每个模块组件中得到的是：

1. 来自 AppModule 组件的请求使用LoggerInterceptor和UrlInterceptor；
2. 来自 LazyLoadedModule 组件的请求使用LoggerInterceptor、UrlInterceptor以及FilterInterceptor。

应用程序模块.ts

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,
  ],
  imports: [
    CoreModule,
    HttpClientModule,
  ],
  providers: [
     {provide: HTTP_INTERCEPTORS,useClass: LoggerInterceptor,multi: true},
     { provide: HTTP_INTERCEPTORS, useClass: UrlInterceptor, multi: true }
  ],
})
export class AppModule {}

延迟加载.module.ts

@NgModule({
  declarations: [
    LazyLoadedComponent,
  ],
  providers: [
     { provide: HTTP_INTERCEPTORS, useClass: FilterInterceptor, multi: true }
  ],
})
export class LazyLoadedModule {}

问题是，当 LazyLoadedModule 延迟加载时，FilterInterceptor …