Angular - 组件之间的共享服务不起作用答案

【问题标题】：Angular - shared service between components doesn't workAngular - 组件之间的共享服务不起作用
【发布时间】：2017-10-16 21:29:43
【问题描述】：

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

服务：

@Injectable()
export class DataService {

    public msgs = [];

    constructor() { }       

}

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

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，直到我再次填充它，但我需要其中的数据。有人知道怎么做吗？

谢谢

【问题讨论】：

标签： angular variables service components sharedservices

【解决方案1】：

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

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

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

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

@NgModule({
    providers:[DataService]
})

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

Angular 9 更新

全局级服务现在定义为

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

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

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

【讨论】：

没有添加到 NgModule 我试试看
@user3356007 也将其从@Component 注释中删除
如果我不将它放在组件的提供程序和构造函数中，我如何在组件中使用它？
@user3356007 不，你需要把它放在构造函数上，只是不要在@NgModule 和@Component 中提供它。提供和注入是两件不同的事情。
@哈维尔，angular.io/guide/…。这是文档的“好”版本。我们曾经有过根本没有文档的时候 :) 我同意它有时会令人困惑

【解决方案2】：

对 echonax 的回复的快速阐述是，提供者作为一个层次结构工作。如果将其添加到 app-module，它将在整个应用程序中运行，因此您不应在其他任何地方“提供”它。但是，如果不需要“全局”服务，只需在父组件上提供它。

【讨论】：