标签: angular2-services

我正在angularjs 2.0中创建一个示例应用程序.在开发过程中,我遇到了一个严重的问题 - 我无法通过构造函数向组件注入任何东西.

这是plnkr网址:https://plnkr.co/edit/g1UcGmYPLtY8GiXuNHzK ？ p = preview

我使用以下代码从app.item.service.ts导入ItemService

import { ItemService } from './app.item.service';

然后我指定提供者为

@Component({
  selector: 'list-todo',
  template: `
    <ul>
    <li *ngFor="let item of items">{{item.text}}</li>
    </ul> 
  `,
  providers : [ItemService]
})

之后,给TodoComponent的代码为

export class TodoComponent implements OnInit {
  items:Array<Object> = [];
  constructor(private itemService: ItemService){  //here is the problem
   }

  ngOnInit(){
    this.getItems();
  }
  getItems(){
    this.items = this.itemService.getItems();
  }
}

当我尝试通过构造函数注入ItemService时,我收到一个错误:"错误:无法解析TodoComponent的所有参数:(？)." 我甚至无法注入像Injector这样的angularjs提供者.

但是,这种方法对我有用:

const injector =  ReflectiveInjector.resolveAndCreate([ItemService]);
this.itemService = injector.get(ItemService);

我正在使用我的package.json中提到的以下版本的库进行开发

 "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0", …

尝试进入角度2，对角度1有一些经验并且有一些困惑。

我制作了一个共享模块：

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

import { Constants }   from './injectables/constants';
import { Utils } from "./injectables/utils";
import { HighlightDirective } from "./directives/highlight";

@NgModule({
    imports: [ CommonModule ],
    declarations: [ HighlightDirective ],
    providers: [ Constants, Utils ],
    exports: [ HighlightDirective ]
})
export class VCommonModule { }

如果我错了，请纠正我，但是据我了解，这里仅需要导出指令，管道和组件？在我将此模块包含到AppModule的导入中之后，可以立即使用Services（Injectables）吗？所以我做到了：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { VCommonModule } from …

我很清楚我们如何注入服务。我们可以在模块级别或组件级别提供服务。

我希望在该服务依次注入我的组件之前向该服务注入一个特定的属性。有问题的属性取决于我的组件。

如何在 Angular 2 中实现这一点？

例子：

@Injectable()
export class MyService {
  constructor(myProperty: string) {
    setSomethingUsingMyProperty(myProperty)
  }
}

@Component(..., {providers: [MyService] })
export class MyComponent {
  constructor(myService: MyService) {
    myService.doSomething()
  }
}

如果我在上层模块中提供该属性，我认为如果我包含该@Inject指令，Angular 可以注入该属性。但是如何在组件级别实现这一点呢？

目前我正在使用共享服务将数据从一个组件传递到其他组件我在第一个组件上设置值并尝试在另一端检索值,但我收到空数组这里是我的代码:

**Ist Compnent:**

        @Component({
        templateUrl: './landingPage.component.html',
        styleUrls: ['./landingPage.component.css'],
        providers: [LandingService],

    })

    export class LandingPageComponent {
        constructor(private landingService:LandingService) {

        }
     @Input() Location:string;
        @Input() Type:string;

        search(){
            //setting value in landing service
            this.landingService.SearchData[0]=this.Location;
            this.landingService.SearchData[1]=this.Type;
            console.log(this.landingService.SearchData) ///this print the data succesfully but when try to access on
// 2nd compnent receive and empty arrat

            }

第二部分

@Component({
    templateUrl: 'find.component.html',
    styleUrls: ['find.component.css'],
  providers: [find,LandingService]

})


export class IndexComponent implements  OnInit {
       searchData:Object=[];


     constructor(private landingService: LandingService) {
         }          
         ngOnInit() {
          this.searchData=this.landingService.SearchData; .// getting data of my …

我是 angular2 的新手，并尝试将对象结果绑定到 html 模板。我可以使用 Observable 从 srtvice 获取数据。我也可以在控制台和模板中看到 JSON 数据。但是当我尝试从结果 json 访问属性时，它没有显示如下图所示的数据。

下面是我的该组件的代码，

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { JuniorService } from '../Service/service.junior';
import { Employee } from '../../models/Employee';


@Component({
  selector: 'my-getjunior',
  template: `<h1>Details of {{id}} 
  <hr/>
  JSON :  {{Junior | json}} 
  <hr/>
  Summary :  {{junior?.summary}}</h1>`
  //templateUrl: './app/Junior/get/junior.get.html'
})
export class JuniorGet implements OnInit
 {

errorMessage: string;
Junior: Employee;
id: number;
private sub: any;

  constructor (private juniorService: JuniorService, private route: …

我想知道angular2中是否有cacheFactory？如果有,有人可以提供一些技术教程吗？关于如何使用它的简单介绍将非常感激!

PS:现在,我正在尝试将angular1项目移动到angular2,我遇到了使用cacheFactory的问题.

我在angular 2项目中遇到了这个错误:

找不到名称'Response'.

问题来自这项服务:

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


@Injectable()
export class CartographyService {

  public data;

  constructor(private http: Http) {
  }

  getData() {
    return this.http.get('http://localhost:8000/cartography')
      .map((res: Response) => res.json());

  }  
}

加载页面时，我收到“什么是空处理”。我要获取数据列表，但无法在视图中显示这些记录。在这里我添加了代码片段来理解我的要求

Angular JS 服务文件

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

@Injectable()
export class PostsService {
 data: any = null;
 totalDocs: number;
 url: any = 'http://localhost:3000/services/';
 constructor(private _http: Http) { }

 public getPosts() {
  return this._http.get(this.url + 'posts')
              .map((res: Response) => res.json());
 }    
}

//End Angular JS Web service*

从 MongoDB 获取数据的 Node JS 代码

import { default as Category} from "../models/Category";
import { default …

我想调用共享服务功能表单“另一个”组件的视图文件。

例如，要删除一条记录，我想设置以下内容：

<tr *ngFor="let ddata of tableData.data; let i = ddata" 
(click)="delete_record(ddata)" 
[class.active]="ddata.discountauthorizationid == selectedRow">

这delete_record必须是我将在相关组件中注入的服务的一部分。

I have a (Django) API that implements HATEOAS, so typically foreign keyed objects come through as URLs to other API endpoints. The following is the result from http://localhost:8000/brew-monitor/api/fermentations/1/ and is a Fermentation object with associated Dataset objects:

{
    "id": 1,
    "name": "My Beer",
    "datasets": [
        "http://localhost:8000/brew-monitor/api/datasets/1/",
        "http://localhost:8000/brew-monitor/api/datasets/2/"
    ]
}

I need to write a service that will GET the above object and then iterate through the datasets URLs and GET those as well (I know, maybe it can be more …

我试图在服务中使用Angular 2 Renderer类方法.

首先,我将它注入到类构造函数中,如下所示:

    @Injectable
    export class MyService{
     constructor(private renderer: Renderer,
                 private _cd: ChangeDetectorRef){}

     myFunct(){
       this.renderer.setElementStyle(......);
      }
    ......
    }

有了这个,浏览器控制台就抛出一个错误堆栈:

   Error: No provider for Renderer!
at NoProviderError.BaseError [as constructor] (http://local.xyz.com:3000/vendor.bundle.js:30912:34)
at NoProviderError.AbstractProviderError [as constructor] (http://local.xyz.com:3000/vendor.bundle.js:28881:16)

我在StackOverflow上阅读了与此类问题相关的几个答案,以及Angular DI上的一篇关于nattram的博客文章,并尝试使用如下@Inject的服务类构造函数:

   constructor(@Inject(Renderer) renderer : Renderer){}

仍然没有成功,仍然得到同样的错误.我相信我在这里错过了一些技巧.它在我在组件中使用相同的东西时工作,我不知道它为什么不在服务类中接受它.

假设我创建一个对象如下：

formSummery: any = [];

{
  "jobs" : [ {
    "job_id" : 10,
    "users" : [ {
      "user_id" : 11,
      "data_points" : [ {
        "efficiency" : "good",
        "form_id" : "2",
        "instrument_type" : "plug",
        "background_value" : "7",
        "surveyed_item_id" : "100",
        "duration" : 0,
        "start_time" : "2017-07-20T04:04:43.000Z",
        "datastream" : "GENERIC",
        "username" : "abc@gmail.com.com"
      }]
    } ]
  } ]
}

删除属性数据流、用户名和 start_time 以结束新的 formSummery 的最佳方法是什么？

{
  "jobs" : [ {
    "job_id" : 10,
    "users" : [ {
      "user_id" : 11,
      "data_points" : [ …

当我使用HttpClient使用响应Obj 更新html时，它会更新值，但会出现多个错误。

    import { any } from 'codelyzer/util/function';
    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';

    @Injectable()
    export class AuthService {

      constructor(private httpClient: HttpClient) { }
      get() {
        return this.httpClient.get<any>('/capi/v2/users/me', {
          observe: 'body',
          responseType: 'json'
        });
      }
    };

    import { AuthService } from './../../services/api/auth-service';

    import { Component, Injectable, OnInit } from '@angular/core';

    @Component({
        selector: 'app-dashboard',
        templateUrl: './dashboard.component.html'
    })

    @Injectable()
    export class DashBoardComponent implements OnInit {
        user;
        constructor(private authService: AuthService) {}; …