Angular - 组件之间的共享服务不起作用 [英] Angular - shared service between components doesn't work

问题描述

我有一项声明变量的服务.在我的组件中，我使用这个变量将数据放入其中.

I have a service where I declare my variable. In my component I use this variable to put data into it.

服务:

@Injectable()
export class DataService {

    public msgs = [];

    constructor() { }       

}

现在我在我的组件中使用这个变量:

Now I use this variable in my component:

export class MessagesComponent implements OnInit {   

    constructor(private dataService: DataService){}

    ngOnInit() {   
        this.getData();   
    }

    getData(){
        let msgs = [];

        if (diffr <= this.geomessage[i].range) {
            this.geomessage[i].dist = diffr;
            msgs.push(this.geomessage[i]);
            //console.log("this message: ", this.geomessage[i]); //DEBUG
        }
        this.dataService.msgs = msgs;

    }    
}    

我只发布了必要的代码.this.dataService.msgs het 充满了消息，这工作正常.当我到达另一个组件时，this.dataService.msgs 的数据仍然存在，但是当我回到 Messagescomponent 时，this.dataService.msgs 是 undefined 直到我再次填充它，但我需要其中的数据.有人知道怎么做吗?

I have only posted the necessary code.The this.dataService.msgs het filled with messages this works fine. When I got to another component the data of this.dataService.msgs still exists but when i Get back tot the Messagescomponent the this.dataService.msgs is undefined till i fill it again but I need the data that was in it. Does somebody know how to do this?

谢谢

推荐答案

如果您在 @Component 注释的 providers 数组中提供 DataService，

If you are providing your DataService inside the providers array of your @Component annotation,

@Component({
    ...
    providers: [DataService],
})...

此服务将是此组件的单例(它将创建一个新实例)(如果他们还没有在其注释下提供此服务，则它是子项).

this service will be a singleton (it will create a new instance) for this component (and it's children if they have not provided this service under their annotation also).

如果你想在多个组件之间使用这个服务并且共享同一个服务实例；您需要在组件/模块中提供此服务，该组件/模块是 DI 树中这些组件的父级.如果这是一项全球服务，我建议仅在您的 AppModule(或共享模块)中提供它.

If you want to use this service among multiple components and share the same instance of the service; you need to provide this service in a component/module which is the parent of these components in the DI tree. If this is a global service I suggest providing it only in your AppModule (or in a shared module).

@NgModule({
    providers:[DataService]
})

来源:https://angular.io/guide/dependency-injection#injector-hierarchy-and-service-instances

全球级服务现在定义为

@Injectable({
  providedIn: 'root',
})
export class DataService {

这应该是推荐的方法，因为如果不使用它会自行摇一摇.

This should be the recommended approach since it will tree-shake itself if it's unused.

来源:https://angular.io/guide/providers#providin-and-ngmodules

这篇关于Angular - 组件之间的共享服务不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！