标签: angular-services

我正在搞乱Angular.试图用angular-cli生成一些东西.但是,在生成新服务时,服务将放在"/src/"文件夹中.

我想为此设置一个全局默认文件夹.是否有配置设置,我可以做以下事情:{ servicesDir: "/src/services/" }？

我正在使用ng generate service Test命令.

为什么我的DataHandlerService中的服务(this.loggerService)在注入时未定义？我认为依赖注入可以解决这个问题.我的loggerService适用于其他服务.请帮我意识到我哪里出错了.我的DataHandlerService代码如下:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { LoggerService } from './logger.service';

@Injectable()

export class DataHandlerService 
{
constructor(private loggerService: LoggerService)
{

}

extractData(res: Response)
{
    let body = res.json();
    return body || {};
}


handleHttpError(error: any)
{
    let errMsg = (error.message) ? error.message : error.status ? `${error.status} - ${error.statusText}` : 'Server error';

    if (errMsg && this.loggerService)  //Why is this.loggerService always undefined?
    {
        this.loggerService.error(errMsg);
    }

    return Observable.throw(errMsg); …

我是角度(和编程)的新手,这是一个看似简单的问题,但我无法弄清楚.

一些教程建议使用$httpProvider.interceptors.push('interceptorName')来操纵http请求和响应.

我想了解更多关于拦截器的事情所以我看一下官方文档,但我找不到任何与拦截器相关的东西,只有一个方法(useApplyAsync([value]);)和一个属性(默认值)$httpProvider(docs)).

我从其他教程中知道拦截器是一个常规服务工厂,我知道如何使用它,但我的问题是:因为语法是$httpProvider.interceptors.push('interceptorName'),然后我希望我会找到一个名为"拦截器"的属性$httpProvider,但实际上我可以"T.我想念这个混乱的东西吗？或者我的概念从底部是完全错误的？

在我的Angular 2应用程序中,我有后端服务,如下所示.

getUserInterests() {
    return this.http.get('http://localhost:8080/test/selections').map((res: Response) => res.json());
}

在调用此服务后,我想在上一个服务成功之前调用另一个服务.

第二次服务

let params: URLSearchParams = new URLSearchParams();
    params.set('access_token', localStorage.getItem('access_token'));
    return this.http.get('http://localhost:8080/user/selections', { search: params }).map((res: Response) => res.json());

这两个服务分别返回两个JSON数组.然后我需要用这两个数组进行一些登录.

EDITED

service.ts

getUserInterests() {
    return this.http.get('http://localhost:8080/test/selections').map((res: Response) => res.json());
}

getSavedSelections() {
    let params: URLSearchParams = new URLSearchParams();
    params.set('access_token', localStorage.getItem('access_token'));
    return this.http.get('http://localhost:8080/interest/user/selections', { search: params }).map((res: Response) => res.json());
}

getSelectionList() {
    var obs = this.getUserInterests().flatMap(
        (interests) => {
            return Observable.forkJoin([
                Observable.of(interests),
                this.getSavedSelections()
            ]);
        }
    );
    return obs;
}

然后我在我的其他ts文件中使用以下来调用该服务. …

我有一个问题，我想重写我的应用程序代码并将主模块更改为 main.ts 中指向的主根独立组件。

一切正常，但我对 HttpClientModule 有问题。我在 root 中提供的一项服务中使用 HttpClient。在 MainComponent 中，我将 HttpClientModules 添加到导入数组中，但随后出现错误，表示我没有向应用程序提供 HttpClientMoudle，并且此服务无法使用它。

Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[MainComponent])[MainService -> MainService -> HttpClient -> HttpClient]:
NullInjectorError: No provider for HttpClient!

当我将此 HttpClientModule 添加到 AppRoutingModule 时，我也将其添加到 main.ts 中

bootstrapApplication(MainComponent, {
  providers: [importProvidersFrom(RoutingModule)],
});

效果很好，服务没有任何问题。

这是包含此问题的基本示例的代码，有人可以解释为什么导入到根独立组件在这种情况下不起作用，但导入到 RoutngModule 可以解决问题吗？

https://stackblitz.com/edit/angular-fhpbvm?file=src/main.ts

我期待Angular loadConfig()在构建其他服务之前等待我的函数结算,但事实并非如此.

app.module.ts

export function initializeConfig(config: AppConfig){
    return () => config.loadConfig();
}

@NgModule({
     declarations: [...]
     providers: [
          AppConfig,
         { provide: APP_INITIALIZER, useFactory: initializeConfig, deps: [AppConfig], multi: true }
     ] })
export class AppModule {

}

app.config.ts

@Injectable()
export class AppConfig {

    config: any;

    constructor(
        private injector: Injector
    ){
    }

    public loadConfig() {
        const http = this.injector.get(HttpClient);

        return new Promise((resolve, reject) => {
            http.get('http://mycoolapp.com/env')
                .map((res) => res )
                .catch((err) => {
                    console.log("ERROR getting config data", err );
                    resolve(true);
                    return Observable.throw(err …

我创建了一个角度应用程序,它从json文件中获取数据.但我在使用html显示数据时遇到问题.很多变量都在荷兰语中,我很抱歉.我对这一切也有点新意:)

这是我的服务:

import {Injectable} from '@angular/core';
import {Http, RequestOptions, Response, Headers} from '@angular/http';
import {Observable} from "rxjs";
import {Afdelingen} from "./models";

@Injectable()
export class AfdelingService {
  private afdelingenUrl = '/assets/backend/afdelingen.json';
    constructor(private http: Http) {
      }

      getAfdelingen(): Observable<Afdelingen[]> {
        return this.http.get(this.afdelingenUrl)
          .map(this.extractData)
          .catch(this.handleError);
      }

      private extractData(res: Response) {
        let body = <Afdelingen[]>res.json();
        return body || {};
      }

      private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
      }

      addAfdeling(afdelingsNaam: string, afdeling: any): Observable<Afdelingen> {
        let body = JSON.stringify({"afdelingsNaam": …

我试图从服务订阅一个observable,它构建没有错误,但我在浏览器中查看时得到错误"this.service.getBanners(...).subscribe不是一个函数".

服务:

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

@Injectable()

export class BannerService {

    banners: any = ['1','2','3'];

    constructor(
    ) {}

    getBanners(): Observable<any[]> {
        return this.banners;
    }

    setBanners(banners: any[]): void {
        this.banners = banners;
    }

}

零件:

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BannerService } from './../banner/banner.service';

@Component({
    selector: '.banner',
    templateUrl: './banner.component.html',
    styleUrls: ['./banner.component.sass'],
    encapsulation: ViewEncapsulation.None
})

export class BannerComponent implements OnInit {

    banners: any[]; …

在尝试对API进行GET调用时,我遇到了Ionic 3的CORS问题.我正在使用Ionic本地服务器,在命令行中为live server运行ionic serve.

错误 否请求的资源上存在"Access-Control-Allow-Origin"标头.原产地" 的http://本地主机:8100 "因此不允许访问.

我尝试用代理设置更新"ionic.config.json",但似乎没有工作..

{
  "name": "projectLeagueApp",
  "app_id": "47182aef",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [
    {
      "path":"/games",
      "proxyUrl": "https://api-2445582011268.apicast.io/games/"
    }
  ]
}

我的数据服务

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class DataProvider {

  headers = new Headers({'user-key': '1234567890123'});
  options = new RequestOptions ({headers: this.headers}); 
  limit: number = 50;

  constructor(public http: Http) {
    console.log('Hello DataProvider Provider');
  }

  getGames(genre, offset_num) {

    let genre_id …

我正在学习RxJs,我正在寻求对我的假设进行确认或更正.

我试图在我可以在我的服务类的不同位置使用的服务中创建一个public read only observable .next().我想知道这是否是正确的方法:

private myObservable = new Subject<T>();
public myObservable$: Observable<T> = this.myObservable.asObservable();

• 用户可以订阅 myObservable$
• 我可以用myObservable.next(...);

它的工作完美,但我有足够的经验知道我可能只是一个不知情的白痴(RxJS很大).这个用例是正确的模式和正确的对象吗？