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

Question

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

服务：

@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充满了消息，这工作正常。当我到达另一个组件时，this.dataService.msgs 的数据仍然存在，但是当我回到Messagescomponent时，this.dataService.msgs undefined，直到我再次填充它，但我需要其中的数据。有人知道如何做到这一点吗？

感谢

Answer 1

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

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

此服务将是此组件

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

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

@NgModule({
    providers:[DataService]
})

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

角度 9 更新

全局级别服务现在定义为

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

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

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

Answer 2

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