Angular 4 Singleton Services

Question

我试图创建一个服务来共享两个组件之间的数据。我将该服务注入到根模块中，以便通过在根模块提供程序中执行DI来在整个应用程序中访问该服务。我的代码看起来大致如此。

服务

@Injectable(){ 
    export class ForumService{ 
     forum: any; 

     setForum(object){ 
      this.forum = object; 
     } 

     getForum(){ 
      return this.forum; 
     } 
    } 

根模块

....... 
import { ForumService } from 'forumservice'; 
....... 

@NgModule({ 
    declarations: [.....], 
    imports: [.....], 
    providers: [....., ForumService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule{} 

部件的一个

//A bunch of import statements 

import { ForumService } from 'forumservice'; //Without this Angular throws a compilation error 

@Component({ 
    selector: 'app-general-discussion', 
    templateUrl: './general-discussion.component.html', 
    styleUrls: ['./general-discussion.component.css'], 
    providers: [GeneralDiscussionService]  //Not injecting ForumService again 
}) 

export class GeneralDiscussionComponent implements OnInit{ 

    constructor(private forumService: ForumService){} 

    ngOnInit(){ 
    helperFunction(); 
    } 

    helperFunction(){ 
    //Get data from backend and set it to the ForumService 
    this.forumService.forum = data; 
    console.log(this.forumService.forum); //prints the data, not undefined 
    } 
} 

组件两个

//A bunch of import statements 

import { ForumService } from 'forumservice'; //Without this Angular throws a compilation error 

@Component({ 
    selector: 'app-forum', 
    templateUrl: './forum.component.html', 
    styleUrls: ['./forum.component.css'], 
    providers: [] 
}) 

export class ForumComponent implements OnInit { 
    forumData: any; 

    constructor(private forumService: ForumService){} 

    ngOnInit(){ 
     this.forumData = this.forumService.forum; // returns undefined   
    } 
} 

有一次，我从组件之间导航，组件两个我期待“这是一个字符串”。但我得到undefined。是否因为组件中的导入语句？如果我删除，我看到一个编译错误说没有找到ForumService。

Answer 1

不是使用getter和setter，而是直接在组件中使用对象（而不是primitibe，如字符串）。

您的服务

@Injectable(){ 
export class ForumService{ 
    forum:any = {name:string}; 
} 

组件一个

export class GeneralDiscussionComponent implements OnInit{ 

    constructor(private forumService: ForumService){} 

    ngOnInit(){ 
    this.forumService.forum.name="This is a string"; 
    } 
} 

组件2

export class ForumComponent implements OnInit { 
// forumTitle: string; // do not need this anymore 
    forum:any; // use the forum.name property in your html 

    constructor(private forumService: ForumService){} 

    ngOnInit(){ 
     this.forum = this.forumService.forum; // use the   
    } 
} 

我知道ENCA psulating是可取的，并且用您当前的代码可能会遇到一些计时问题。但是，当处理服务中的共享数据时，您可以双向绑定上述变量，并且您的组件将同步。

编辑：

也是一个重要的通知，想要组件之间同步的变量需要是一个对象。而不是forumTitle:string，使它forumTitle:any = {subject:string}或类似的东西。

否则，当数据在服务中发生变化时，您需要将组件作为数据的侦听器。

Answer 2

我会用BehaviorSubject在这种情况下，应该是类似的东西：

@Injectable(){ 
export class ForumService{ 
    private _forum: BehaviorSubject<any> = new BehaviorSubject<any>(null); 
    public forum: Observable<any> = this._forum.asObservable(); 

    setForum(object){ 
     this._forum.next(object); 
    } 

} 

然后只需用异步管其绑定模板：{{forumService.forum|async}}或订阅。