Question

在我的根组件app.component.ts中，我已经向provider []添加了一项服务，并在构造函数中对其进行了声明：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AccountService]
})

export class AppComponent implements OnInit {
  constructor( accountService: AccountService ) {}
ngOnInit(){}
}

在我的主要应用程序模块app.module.ts中，我有一个entryComponent，它将最终成为MatDialog的内容：

// ....
entryComponents: [CompanyPreviewComponent]

当我打开对话框时，会生成一个新的AccountService副本。因此，现在我有两个相同服务的实例，并且在对话框中对该服务执行的任何操作都不会影响其余应用程序所依赖的实际AccountService。

阻止此附加服务创建的最佳方法是什么？谢谢

Answer 1

您应该module级别Provide service 而不是component，以便服务的所有实例共享相同的副本。

注意：如果您的组件在惰性加载模块下会注入此服务，则不是这样

对于最新的Angular版本，可以通过两种方式实现模块级别的提供服务：

1。使用providedIn: AppModule或providedIn: 'root'

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: AppModule,
})
export class AccountService {
}

2。直接在模块内部提供

@NgModule({
  declarations: [
    AppComponent,
    ........
  ],
  .........
  providers: [AccountService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

如果将服务添加到组件内部，则该服务将在该组件本地。因此，如果您有两个组件实例，那么您将有两个服务实例。

如果您在模块内部提供服务，那么它将是全局的，并且如果您有两个组件实例，则它们将共享该服务的同一实例。

Angular实例化EntryComponent创建新服务

2 个答案: