如何导入提供的In: root singleton 服务？

Question

Let's say this is my simple service:

 @Injectable({
      providedIn: 'root'
    })
    export class UserpreferencesService {
      color: string = 'yellow';

      constructor() {
        console.log("UserpreferencesService instance created");
     }
    }

I have two components where I want to use the color field from the service. If I import in each component the service it won't act as singleton: I'll have a new instance every time I switch components. Here is the Stackblitz .

If I don't import anything the service won't be recognized: "Cannot find name UserpreferencesService". This is how I use the service inside component:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-compone',
  templateUrl: './compone.component.html',
  styleUrls: ['./compone.component.css']
})
export class ComponeComponent implements OnInit {
  constructor(private UserPreferences: UserpreferencesService) {
    this.UserPreferences.color = 'green';
  }
  ngOnInit() {
  }
}

The service is not part of any providers list. How can I solve this?

Answer 1

There must be an import for the service in each component. My problem was that I was navigating from the address bar (this full refreshes the app). You have to use routerLink to have singleton service.