组件之间的角度共享服务不起作用

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

Thx

Answer 1

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

@Component({
    ...
    providers: [DataService],
})...
此服务将是此组件的单例（它将创建一个新实例）（如果它们也未在其注释下提供此服务，则为子项）。 

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

提供它。

@NgModule({
    providers:[DataService]
})
来源：https://angular.io/guide/dependency-injection#injector-hierarchy-and-service-instances

Answer 2

只是对echonax的回复进行了详细说明，即提供者是一个层次结构。如果将其添加到应用程序模块中，它将在整个应用程序中正常工作，因此不应在其他任何地方“提供”它。但是，如果不需要“全局”服务，则只需在父组件上提供即可。