全局服务在 angular2 中不起作用
global service not working in angular2
我在 angular2 中创建了一个全局服务,用于访问所有组件的变量,如下所示。
global.objects.service.ts
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
export class GlobalObjectsService {
workspace:any;
constructor() {
}
}
然后我可以在我的 workspace.component
中访问并为此对象设置新值,如下所示:
import {Component, OnInit,Input} from 'angular2/core';
import { GlobalService} from './../../../app/shared/services/global/global.service';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { WorkspaceService } from './../../../app/shared/services/pm/workspaces.service';
@Component({
selector: 'workspaces',
providers:[WorkspaceService],
templateUrl: 'app/project-manager/workspaces/workspaces.component.html'
})
export class WorkspacesComponent implements OnInit {
@Input() workspaces:any;
constructor(private globalService:GlobalService,private globalObjectsService:GlobalObjectsService,private workspaceService:WorkspaceService) { }
ngOnInit() { }
selectWorkspace(workspace_id:string){
this.workspaceService.getWorkspaceById(workspace_id,this.globalService.baseUrl).subscribe((workspace)=>{
this.globalObjectsService.workspace=workspace;
console.log(this.globalObjectsService.workspace); //this prints workspace correctly
});
}
}
但是当我试图在下面的组件中访问这个全局对象时,它显示 undefined
import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
@Component({
selector: 'pages',
templateUrl: 'app/project-manager/pages/pages.component.html'
})
export class PagesComponent implements OnInit {
@Input() pages:any;
public workspace:any;
constructor(private globalObjectsService:GlobalObjectsService) {
this.workspace=this.globalObjectsService.workspace;
console.log(this.workspace); //this is not working
}
ngOnInit() { }
}
在引导过程中,除根组件外,我没有在任何组件的 providers
中包含 global.objects.service
。
有什么建议吗?
您的服务缺少 @Injectable()
指令。只需像这样添加:
import {Injectable} from 'angular/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
@Injectable()
export class GlobalObjectsService {
workspace:any;
constructor() {
}
}
阅读 Angular 2 here.
中有关依赖注入的更多信息
看来你缺少的是将 WorkspaceService
注入 GlobalObjectsService
@Injectable()
export class GlobalObjectsService {
constructor(public workspace:WorkspaceService) {
}
}
您需要像 GlobalObjectsService
一样提供 WorkspaceService
。全局 GlobalObjectsService
不能注入更局部的 WorkspaceService
取决于你注入的位置 GlobalObjectsService
我在 angular2 中创建了一个全局服务,用于访问所有组件的变量,如下所示。
global.objects.service.ts
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
export class GlobalObjectsService {
workspace:any;
constructor() {
}
}
然后我可以在我的 workspace.component
中访问并为此对象设置新值,如下所示:
import {Component, OnInit,Input} from 'angular2/core';
import { GlobalService} from './../../../app/shared/services/global/global.service';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
import { WorkspaceService } from './../../../app/shared/services/pm/workspaces.service';
@Component({
selector: 'workspaces',
providers:[WorkspaceService],
templateUrl: 'app/project-manager/workspaces/workspaces.component.html'
})
export class WorkspacesComponent implements OnInit {
@Input() workspaces:any;
constructor(private globalService:GlobalService,private globalObjectsService:GlobalObjectsService,private workspaceService:WorkspaceService) { }
ngOnInit() { }
selectWorkspace(workspace_id:string){
this.workspaceService.getWorkspaceById(workspace_id,this.globalService.baseUrl).subscribe((workspace)=>{
this.globalObjectsService.workspace=workspace;
console.log(this.globalObjectsService.workspace); //this prints workspace correctly
});
}
}
但是当我试图在下面的组件中访问这个全局对象时,它显示 undefined
import {Component, OnInit ,Input} from 'angular2/core';
import { GlobalObjectsService} from './../../shared/services/global/global.objects.service';
@Component({
selector: 'pages',
templateUrl: 'app/project-manager/pages/pages.component.html'
})
export class PagesComponent implements OnInit {
@Input() pages:any;
public workspace:any;
constructor(private globalObjectsService:GlobalObjectsService) {
this.workspace=this.globalObjectsService.workspace;
console.log(this.workspace); //this is not working
}
ngOnInit() { }
}
在引导过程中,除根组件外,我没有在任何组件的 providers
中包含 global.objects.service
。
有什么建议吗?
您的服务缺少 @Injectable()
指令。只需像这样添加:
import {Injectable} from 'angular/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
@Injectable()
export class GlobalObjectsService {
workspace:any;
constructor() {
}
}
阅读 Angular 2 here.
中有关依赖注入的更多信息看来你缺少的是将 WorkspaceService
注入 GlobalObjectsService
@Injectable()
export class GlobalObjectsService {
constructor(public workspace:WorkspaceService) {
}
}
您需要像 GlobalObjectsService
一样提供 WorkspaceService
。全局 GlobalObjectsService
不能注入更局部的 WorkspaceService
取决于你注入的位置 GlobalObjectsService