Question

我有两个组件和三个服务：

团队选择-cards.component
选择卡片-display.component
选择-cards.service
HTTP的选择-cards.service
HTTP的团队选择-cards.service

chooses-cards-display.component为自己提供chooses-cards.service，chooses-cards.service通过依赖注入获得http-chooses-cards.service。

选择卡片-display.component

import {Component} from 'angular2/core';
import {ChoosesCardsService} from './Services/chooses-cards.service';
import {ICard} from './Commons/ICard.interface';

@
Component({
    selector: 'chooses-cards-display',
    templateUrl: './templates/ChooseCardComponent/choose-card-display.tpl.html',
    providers: [ChoosesCardsService]
})
export class ChooseCardDisplayComponent {
    private _cards: Array<ICard>;
    public _amount: number;
    public _skip: number; 

    constructor(private _choosesCardService: ChoosesCardsService) {
        this._amount = 3;
        this._skip = 0;
        this._cards = new Array<ICard>();
        this._choosesCardService.getChoosesCards(this._amount, this._skip).forEach(card => {
            console.log("CCDC hi!", card);
            this._cards.push(card);
            console.log("CCDC bye!");
        });
    }
}

选择-cards.service

import {Injectable} from 'angular2/core';
import {HttpChoosesCardsService} from './http-chooses-cards.service';
import {HttpUserService} from '../../global/global.services';
import {IUser} from '../../Global/global.commons';
import {ICard} from '../Commons/ICard.interface';
import {CardFactory} from '../Commons/CardFactory.class'


@Injectable()

export class ChoosesCardsService {
    constructor(private _httpChoosesCardsSrvice: HttpChoosesCardsService, private _httpUserSrvice: HttpUserService) {
    }

    getChoosesCards(amount: number, skip: number): Array<ICard> {
        var ret = new Array<ICard>();
        this._httpChoosesCardsSrvice.getChoosesCards(amount, skip).forEach(cardInfo => {
            console.log("CCS hi: ", CardFactory.create(this._httpUserSrvice.getUserById(cardInfo.userId), cardInfo.projectName,
                cardInfo.description, cardInfo.likes));
            ret.push(CardFactory.create(this._httpUserSrvice.getUserById(cardInfo.userId), cardInfo.projectName,
                cardInfo.description, cardInfo.likes));
            console.log("CCS bye!");
        });
        return ret;
    }
}

HTTP的选择-cards.service

import {Injectable} from 'angular2/core';
import {ICard} from '../Commons/ICard.interface';

@Injectable()
export abstract class HttpChoosesCardsService {
    abstract getChoosesCards(amount: number, skip: number): any ;
}

http-chooses-cards.service是一个抽象类，我向chooses-cards.service提供了一个名为http-team-chooses-cards.service的扩展名。

HTTP的团队选择-cards.service

import {Injectable} from 'angular2/core';
import {HttpChoosesCardsService} from './http-chooses-cards.service';

@Injectable()
export class HttpTeamChoosesCardsService extends HttpChoosesCardsService{

    constructor(private _teamID: number) { super(); console.log("from teamService ", this._teamID);}

    getChoosesCards(amount: number, skip: number): any {
        //Mock data.
        var ret = new Array<any>();
        ret.push({
            "userId": 12,
            "projectName": "Bama",
            "description": "Bama is good",
            "likes" : 100
        });
        ret.push({
            "userId": 2,
            "projectName": "Bama2",
            "description": "Bama2 is Bad",
            "likes": 5
        });
        return ret;
    }
}

我在team-chooses-cards.component chooses-cards-display.component大声提供此服务。

团队选择-cards.component

import {Component} from 'angular2/core';
import {provide} from 'angular2/core';
import {Input} from 'angular2/core';
import {HttpTeamChoosesCardsService} from './Services/http-team-chooses-cards.service';
import {HttpChoosesCardsService} from './Services/http-chooses-cards.service';
import {ChooseCardDisplayComponent} from './chooses-cards-display.component';

@Component({
    selector: 'team-chooses-cards',
    template: `<chooses-cards-display></chooses-cards-display>`,
    directives: [ChooseCardDisplayComponent],
    inputs: ['teamID : given_teamID'],
    providers: [provide(HttpChoosesCardsService, { useClass: HttpTeamChoosesCardsService, useValue: this.teamID})]
})
export class TeamChooseCardComponent {
    @Input('given_teamID') teamID: number;
    constructor() {
        console.log("from teamcomponeny ", this.teamID);
    }
}

首先，如果我的逻辑是错误的，如果有人能告诉我不同的方式或更好的架构，我会很感激，如果不是，我会很乐意回答有关架构的问题。

现在，当我在http-team-chooses-cards.service中提供号码时，我想为team-chooses-cards.component注入一个号码。

任何人都可以找到我做错的事吗？

感谢。

Angular 2将int注入服务，然后将服务注入anther服务

0 个答案: