子模块中的服务与父模块的组件共享

Question

我有一个具有以下模块结构的角度应用程序：

Data module
     --> Data component
     --> Data service
List module
  --> imports Data module
   --> List component
          --> which calls Data component
   --> Parent List component
          --> which in turn calls List component

1. 当我使用 List 组件时，数据服务工作正常。
2. 当我使用Parent List组件时，它会渲染List组件，而List组件又渲染Data组件，但数据服务是共享的，与步骤1相同。

它应该创建单独的数据服务实例。

任何关于我所缺少的内容的建议将不胜感激。

谢谢。

Answer 1

您的服务范围取决于您提供服务的方式和地点。

如果您已将服务声明为

providedIn: 'root'

，则只会在提供该服务的所有模块/组件中创建和共享服务的一个全局实例。

@Injectable({
  providedIn: 'root'
})
class DataService {
    // Unique DataService shared accross modules
}

但是您可以通过更改

providedIn

文档链接的值来限制服务范围。

或者通过将其全部删除，从而允许您在组件级别提供它，请考虑以下代码片段：

// We declare the service as injectable without providedIn
@Injectable()
class DataService {
    // The service will do nothing on its own and will never be instantiated
    // If we don't provide it in any component
}

然后我们可以在组件中提供它，这将导致在创建组件时实例化服务：

@Component({
  selector: 'app-list',
  template: ``,
  styleUrl: ``,
  providers: [
    DataService
  ]
})
export class ListComponent {
  constructor(private dataService: DataService) {}
}

@Component({
  selector: 'app-parent-list',
  template: `<app-list></app-list>`,
  styleUrl: ``,
})
export class ParentListComponent {
  constructor(private dataService: DataService) {}
}

DataService 现在仅在创建 ListComponent 时才会实例化，并且当关联的 ListComponent 被销毁时，实例将被销毁。