angular 通过service共享数据

Posted 2023-04-23

参考技术A 1.新建一个service文件

2.在需要共享数据的组件中（比如A组件和B组件）引入ControllService
这里B组件是点击A组件元素后路由出来的模块

多次调用Angular Service单例构造函数

【中文标题】多次调用Angular Service单例构造函数

【英文标题】：Angular Service singleton constructor called multiple times

【发布时间】：2019-01-01 07:41:09

【问题描述】：

我正在尝试使用存储经过身份验证的用户详细信息的应用程序范围的服务 (UserService)。我已经设置了一些路由，但发现 UserService 是按路由实例化的。我希望他们共享相同的 UserService。

我创建了一个包含 TestService 作为提供者的 CoreModule 并将其导入 AppModule。

core.module.ts：

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  TestService  from '../test.service';

@NgModule(
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    TestService
  ]
)
export class CoreModule  

test.service.ts:

import  Injectable  from '@angular/core';

@Injectable(
  providedIn: 'root'
)
export class TestService 
  constructor()  console.log('testService constructor called');

app.module.ts

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';
import  FormsModule  from '@angular/forms';
import  AdminComponent  from './layout/admin/admin.component';
import  AppComponent  from './app.component';
import  AppRoutingModule  from './app-routing.module';


import  CoreModule  from './core/core.module';

@NgModule(
  declarations: [
    AppComponent,
    AdminComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CoreModule
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
)
export class AppModule  

app-routing.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  Routes, RouterModule  from '@angular/router';
import  BasicLoginComponent  from './basic-login/basic-login.component';
import  HttpClientModule  from '@angular/common/http';
import  AdminComponent  from './layout/admin/admin.component';    

const routes: Routes = [
  
    path: '',
    component: AdminComponent,
    children: [
      
        path: 'home',
        loadChildren: './dashboard/dashboard.module#DashboardModule'
      ,
      
        path: 'user/profile',
        loadChildren: './user-profile/user-profile.module#UserProfileModule'
      
    ]

  ,
]
@NgModule(
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
    HttpClientModule
  ],
  exports: [
    [RouterModule]
  ],
  declarations: []
)
export class AppRoutingModule  

我已将 TestService 注入 DashboardComponent 和 UserProfileComponent 构造函数。但是，在其中两个组件之间进行路由时，会调用两次 TestService 构造函数。

它看起来很简单，但不知何故我不能把它弄好。谁能指出我解决此问题的正确方向？

*编辑

dashboard.component.ts

import AfterViewInit, Component, OnInit, ViewEncapsulation from '@angular/core';
/*import NotificationsService from 'angular2-notifications';*/

import  UserService  from '../user.service.js';
import  LocalStorageService  from '../../../node_modules/ngx-webstorage';
import  TestService  from '../test.service.js';

@Component(
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  encapsulation: ViewEncapsulation.None
)
export class DashboardComponent implements OnInit, AfterViewInit 


  constructor(private userService:UserService, private localSt:LocalStorageService,
  private testService:TestService)  // private servicePNotify: NotificationsService
  


  ngOnInit() 

  

用户配置文件组件.ts：

import Component, OnInit from '@angular/core';
import animate, style, transition, trigger from '@angular/animations';
import Http from '@angular/http';
import  TestService  from '../test.service';

@Component(
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: [
    './user-profile.component.scss',
    '../../assets/icon/icofont/css/icofont.scss'
  ],

)
export class UserProfileComponent implements OnInit 

  constructor(public http: Http, private userService: UserService,
  private testService:TestService) 
  

  ngOnInit() 

  

【参考方案1】：

正如您已将 TestService 声明为 -

@Injectable(
  providedIn: 'root'
)

这意味着您正在添加到 AppRoot 模块。

无需在CoreModule 中显式添加，因此请从CoreModule 的提供者中删除。删除以下 -

providers: [
    TestService
  ]

当您在CoreModule 中添加TestSevice 时，RootModule 中已经添加了这就是它constructor 被多次调用的原因。

所以使用上面的任何一个。

【讨论】：

只是对 OP 的一些附加参考。 @eduPeeth 所说的被称为 Provider Scope 并且在官方 Angular 文档中有一个很好的清晰示例讨论它：Provider Scope

@eduPeeth 嗨，我已经从 CoreModule 提供者中删除了 TestService 但仍然是同样的问题。这是控制台输出：imgur.com/a/s7JuLlU。构造函数似乎从 .ts 一次调用，从 .js 调用一次。这是什么意思？

@daisura99 能否请您在使用此服务的地方提供您的组件代码。

@eduPeeth 我想我找到了问题所在。在我的仪表板组件中，我有这行import TestService from '../test.service.js'; ...我的错误。非常感谢您的帮助，很抱歉浪费您的时间！

我只需要评论...我在整个互联网上寻找解决方案，以了解为什么我同时调用了 ts 和 js 文件并且单例服务没有保留在我的代码中。在阅读了@eduPeeth 的帖子后，搜索了我的代码并找到了对 .js 文件的引用。花了这么多愤怒的时间……无论如何，谢谢你的线索！

【参考方案2】：

@Injectable( providedIn: 'root' )

providedIn 和 root 选项表示，该服务在整个应用程序中作为singleton 服务可用。 如果您没有添加到任何模块的提供者列表中，它不会报任何错误，例如 No provider for xxxservice bcz of providedIn。 如果您确实添加到列表中，将导致创建一个新的服务实例，这会给您带来超出预期的错误结果。

注意：请确保使用该概念以获得更好的结果。