如何导入 providedIn: root 单例服务？

Question

假设这是我的简单服务：

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

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

我有两个组件，我想在其中使用服务中的颜色字段。如果我在每个组件中导入服务，它就不会充当单例：每次切换组件时我都会有一个新实例。这是 Stackblitz.

如果我不导入任何内容，将无法识别该服务："Cannot find name 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 才能获得单例服务。

如何导入 providedIn: root 单例服务？

How do I import the providedIn: root singleton service?

singleton

angular