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 注释的 providers 数组中提供 DataService，

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

这个服务将是这个组件的单例(它将创建一个新实例)(如果他们没有在他们的注释下提供这个服务，它就是 child )。

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

@NgModule({
    providers:[DataService]
})

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

Angular 9 更新

全局级服务现在定义为

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

这应该是推荐的方法，因为如果它未被使用，它会自行进行 tree-shaking。

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