标签: angular2-services

我有一个设置页面,用户可以在其中保存一些配置变量,例如用户名.用户还可以更改该页面上的用户名.但是当我转到另一个组件(页面)并返回时,用户名不会保存.

我还想在其他组件中显示用户名.我怎么做？有一个全局变量？

结构: - 应用程序 - app.ts(主要) - setting.ts - someOtherComponent.ts

考虑完全简单的Angular 2服务:

import { Injectable } from '@angular/core';
import {Category} from "../models/Category.model";

@Injectable()
export class CategoryService {
    activeCategory: Category|{} = {};
    constructor() {};
}

然后使用此服务的组件:

import { Component, OnInit } from '@angular/core';
import {CategoryService} from "../shared/services/category.service";
import {Category} from "../shared/models/Category.model";

@Component({
    selector: 'my-selector',
    template: `
    {{categoryService.activeCategory.Name}}<br/>
    {{category.Name}}<br/>
`,
})
export class MySelectorComponent implements OnInit {
    category:Category|{} = {};

    constructor(public categoryService:CategoryService){};

    ngOnInit() {
        this.category = this.categoryService.activeCategory;
    };
}

假设适当定义的Category模型并假设某个地方的另一个组件在某个时刻将服务上的activeCategory设置为有效的Category.假设类别服务被设置为适当更高级别的提供者.

当发生这种情况时,模板中的第一行将正确显示类别名称,但第二行不会.我尝试过使用getter和setter与原始访问服务; 我尝试过原始类型与对象和对象属性; 我无法相信第一行是适合此类访问的范例.有人能告诉我将服务属性绑定到组件属性的最简单方法,该属性将正确地改变角度2中的跟踪吗？

澄清:我知道我可以使用我创建并为自己推动的可观察量.我要问的是,是否有任何已经融入框架的方法(这不需要我为可观察量编写大量的样板),只是在服务和组件之间建立一个可变轨道.

redux的需求是什么,因为我们也可以保存并从服务中获取数据,据我所知,我们也可以将数据保存并保存到服务中,并且该服务可以被其他组件使用

上下文

我创建了一个ApiService类来处理我们的自定义API查询,同时使用我们自己的序列化程序+其他功能.

ApiService的构造函数签名是:

constructor(metaManager: MetaManager, connector: ApiConnectorService, eventDispatcher: EventDispatcher);

• MetaManager 是一种处理api的metadatas的可注射服务.
• ApiConnectorService是一个包装的服务,Http用于添加我们的自定义标题和签名系统.
• EventDispatcher 基本上是Symfony的事件调度系统,在打字稿中.

问题

当我测试时ApiService,我做了一个初始化beforeEach:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports  : [
            HttpModule
        ],
        providers: [
            ApiConnectorService,
            ApiService,
            MetaManager,
            EventDispatcher,
            OFF_LOGGER_PROVIDERS
        ]
    });
}));

它工作正常.

然后,添加我的第二个规范文件,该文件是ApiConnectorService,与此beforeEach:

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports  : [HttpModule],
        providers: [
            ApiConnectorService,
            OFF_LOGGER_PROVIDERS,
            AuthenticationManager,
            EventDispatcher
        ]
    });
}));

并且所有测试都因此错误而失败:

错误:无法解析ApiService的所有参数:(MetaManager,？,EventDispatcher).

• 如果我从加载的测试中删除api-connector-service.spec.ts(ApiConnectorService的spec文件),ApiService测试将成功.
• 如果我从加载的测试中删除api-service.spec.ts(ApiService …

我需要在Angular2应用程序中使用FileSaver.js(https://github.com/eligrey/FileSaver.js/).

我知道我可以在主html页面中将其添加为脚本文件,它将起作用.但是我想知道在Angular 2(TypeScript)应用程序中最好的方法是什么,这样我就可以调用window.saveAs来保存文件.

我想创建服务,它可以与一个组件进行交互.我的应用程序中的所有其他组件应该能够调用此服务,并且此服务应该与此组件交互.

如何从服务中调用组件方法？

@Component({
  selector:'component'
})
export class Component{

  function2(){ 
    // How call it?
  }
}

从这个服务？

@Injectable()

export class Service {


  callComponentsMethod() {
    //From this place?;
      }
}

我有一个服务,通过HTTP服务获取数据并返回一个可观察对象.

在第一次调用之后,我想在服务内部缓存结果,一旦新组件尝试获取数据,它将从缓存结果中获取它.

有一个简单的解决方案吗？

我试图在成功完成Promise之后返回一个observable,但该函数没有返回Observable.要特定于代码,我想从存储中获取auth令牌(返回promise),然后在获取数据之后,然后生成对Api的Post请求(返回Observable).通过这样做,sublime文本在函数上给出了一个错误,"声明类型既不是'void'也不是'any'的函数必须返回一个值"下面是我的代码,

logout() : Observable<any>{
  this.userData.getAuthToken().then((token)=>{
    this.token = token;
    this.headers = new Headers ({
      "X-USER-TOKEN": token
    });
    this.options = new RequestOptions ({
      headers: this.headers
    });
    var logout_url = "Api logout method";
    return this.http.post(logout_url,{},this.options)
      .map (res => res.json())
  });
}

如果我只是做一个帖子请求,那么它会像这样返回

return this.http.post(logout_url,{},this.options)
  .map (res => res.json())

但是当我尝试获取数据时,它不会从此发布请求中返回值.任何帮助都感激不尽!提前致谢

getHeroes (): Observable<Heros[]> {
    return this.http.get(this.heroesUrl)
      .map(this.extractData)
      .catch(this.handleError);
  }

我在哪里添加标题以及如何？寻找一个简单的例子.

这是一个有趣的问题:我正在尝试测试使用Ionic BarcodeScanner的服务.我有一个基于离子单元测试库的repo ,以便尝试测试.我正在嘲笑BarcodeScanner.scan方法spyOn(..).and.callFake(..)

问题:当我从组件调用扫描方法时,它可以工作.当我在服务中执行完全相同的操作时,它会抛出超时.

组件测试代码:

it("should be able to set a spy on the scanner and test the component", done => {
    const testBC = "123456";
    const spy = spyOn(TestBed.get(BarcodeScanner), "scan");
    spy.and.callFake(() => {
        return new Promise((resolve, reject) => {
            resolve(testBC);
        })
    });

        component.testScanner().then(res => {
            expect(res).toBe(testBC);
            done();
        }, reason => {
            expect(true).toBe(false);
            done();
        })
});

服务测试代码:

it("should be able to set a spy on the scanner and test the service", done => {
    const testBC = …