Как мне импортировать предоставленный сервис InIn root Singleton?

Question

Допустим, это мой простой сервис:

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

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

У меня есть два компонента, в которых я хочу использовать поле цвета из сервиса. Если я импортирую в каждый компонент сервис, он не будет работать как синглтон: у меня будет новый экземпляр каждый раз, когда я переключаю компоненты. Вот Stackblitz .

Если я ничего не импортирую, служба не будет распознана: «Не удается найти имя UserpreferencesService». Вот как я использую сервис внутри компонента:

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() {
  }
}

Сервис не является частью какого-либо списка провайдеров. Как я могу решить это?

Answer 1

Должен быть импорт для службы в каждом компоненте. Моя проблема заключалась в том, что я перемещался из адресной строки (это полностью обновляет приложение). Вы должны использовать routerLink, чтобы иметь единый сервис.