0

我有一个DropdownProjectService用对象调用的服务selectedProjects: Object = new Array();

我有 2 个功能，一个用于添加数据selectedProjects，一个用于检索数据。

下拉项目.service.ts

export class DropdownProjectService {

    selectedProjects: Object = new Array();

    constructor(private http: Http) {
        this.selectedProjects = new Array();
    }

    addProjects(project: Project){
        this.selectedProjects.push(project);
        console.log('this.selectedProjects in DropdownProjectService.addProjects()');
        console.log(this.selectedProjects);
    }

    getProjects(){
        console.log('this.selectedProjects in DropdownProjectService.getProjects()');
        console.log(this.selectedProjects);
        return this.selectedProjects;
    }
}

我已经在这两个函数中记录了变量。在addProjects函数selectedProjects中显示对象，但在getProjects()方法中，selectedProjects是并且仍然是一个空数组。我想知道为什么会这样以及可以做些什么。如果我需要发布更多代码，我会，但现在我不知道要显示哪个代码。

应用程序.ts：

import 'rxjs/Rx';
import 'reflect-metadata';
import 'es6-shim';
import {Component, ViewEncapsulation, View, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChange, ElementRef, FormBuilder, provide, bind} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
import { DebugElementViewListener } from 'angular2/platform/common_dom';
import {ActualsComponent} from './actuals/actual.component';
import {ActualsFormComponent} from './forms/actuals-form.component';
import {ActualsService} from './actuals/actual.service';
import {HelloWorldComponent} from './hello-world/hello-world.component';
import {HelloWorldService} from './hello-world/hello-world.service';
import {UsersFormComponent} from './users/users-form.component';
import {UserService} from './users/user.service';
import {LoginComponent} from './login/login.component';
import {LoginService} from './login/login.service';
import {DropdownProjectService} from './elements/dropdown/dropdown-projects.service';


@Component({
    selector: 'app',
    templateUrl: './app/templates/main.html',
    encapsulation: ViewEncapsulation.None,
    directives: [ROUTER_DIRECTIVES, ActualsComponent, HelloWorldComponent, UsersFormComponent, LoginComponent], 
    injectables: [ActualsService, HelloWorldService, UserService, LoginService]
})

@RouteConfig([
    { path: '/login', component: LoginComponent, as: 'Login' },
    { path: '/', redirectTo: ['/Login'] },
    { path: '/actuals', component: ActualsComponent, as: 'Actuals'},
    { path: '/helloworld', component: HelloWorldComponent, as: 'HelloWorld'},
    { path: '/users', component: UsersFormComponent, as: 'Users' },
])

export class AppComponent { }

bootstrap(AppComponent, [
    ROUTER_PROVIDERS, HTTP_PROVIDERS, DropdownProjectService,
    provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

下拉项目.ts

import {ROUTER_DIRECTIVES, RouteConfig, RouteParams, Router, RouterOutlet, RouterLink} from 'angular2/router';
        import {FORM_PROVIDERS, FORM_DIRECTIVES, Control, NgClass, NgIf, CORE_DIRECTIVES} from 'angular2/common';
        import {Component, Inject, Input, OnInit, OnChanges} from 'angular2/core';
        import {Http, Headers, ContentHeaders, HTTP_PROVIDERS} from 'angular2/http';

        import {ActualsComponent } from '../actuals/actual.component';
        import {ProjectService} from '../../projects/project.service';
        import {LoginService} from '../../login/login.service';
        import {SearchPipe} from '../custom-pipes/search-pipe';
        import {DropdownProjectService} from './dropdown-projects.service';

        @Component({
            selector: 'dropdown-projects',
            templateUrl: 'app/templates/elements/dropdown-projects.html',
            providers: [FORM_PROVIDERS, HTTP_PROVIDERS, ProjectService, LoginService],
            directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, RouterLink, CORE_DIRECTIVES, RouterOutlet],
            pipes: [SearchPipe]
        })

        export class DropDownProjects implements OnInit, OnChanges{
            projectdata: Object;

            public showMenu: boolean;

            constructor(public dropdownProjectService:DropdownProjectService,public loginService: LoginService, private http: Http,  params: RouteParams) {

                this.showMenu = false;
                loginService.authenticate("user", "pwd");
                this.projectdata = loginService.data;
            }

            addProject(project: Project) {
                this.dropdownProjectService.addProjects(project);
                console.log('project added');
            }
        }

这些组件和服务一团糟。我打算清理所有不使用的东西。我不喜欢草率的代码，但仍然无法帮助创建它...

4

1 回答 1

0

我会说调用您的服务的元素不共享您的服务的相同实例DropdownProjectService。我的意思是，如果您从两个不同的组件调用服务方法，并且每个组件在其providers属性中定义服务，那么组件将使用一个专用的服务实例。因此，您将无法在它们之间共享服务属性...

您在引导 Angular2 应用程序时是否定义了相应的提供程序：

bootstrap(AppComponent, [ DropdownProjectService ]);
于 2016-02-24T08:45:49.353 回答