对于模块,我们在模块中定义了提供程序,这些提供程序将在模块级别注册.

如果我理解正确的话,使用独立组件组织DI/提供程序的方法是在路由定义中使用providers.

因此,如果我们之前有一个加载在路由/moduleA下的模块,并且模块本身在providers中注册了不同的服务,那么使用新方法,我们将为路由/moduleA及其所有子路由定义相同的providersarray.

这个说法正确吗?

如果这是真的,什么时候把提供程序放到route个定义中,什么时候独立的组件providers数组?

推荐答案

你说得对.你仍然可以provide:

  • 您的整个应用程序in root(想想HttpClient)所需的服务
@Injectable({
  providedIn: 'root'
})
export class MyService {}
@NgModule({
  declarations: [SomeComponentThatDependsOnMyService],
  providers: [MyService]
})
export class MyFeatureModule {}
const featureRoutes = [
  { 
    path: '',
    children: [
      { path: 'a', loadComponent: () => import('./a.component.ts').then(c => c.AComponent) },
      { path: 'b', loadComponent: () => import('./b.component.ts').then(c => c.BComponent) },
    ],
    providers: [MyService]
  },
] as Routes;

const appRoutes = [
  { 
    path: 'feature',
    loadChildren: () => featureRoutes,
    providers: [MyOtherService]
  },
  { path: '**', component: NonFeatureComponent },
] as Routes;

bootstrapApplication(App, {
  providers: [
    provideRouter(appRoutes)
  ]
});
@Component({
  selector: 'app-isolated',
  standalone: true,
  providers: [MyService]
})
export class MyIsolatedComponent {}

提供这些服务的地点有a hierarchy个,提供某项服务的"正确"地点取决于以下因素:

  1. 有多少组件或其他服务需要共享您的服务的同一实例
  2. 有多少组件或其他服务应该知道您的服务
  3. 您的服务实际应该实例化的时间(是在应用程序启动时需要还是仅在加载了特定的路由/组件之后才需要?)

但使用@Injectable({ providedIn: 'root' })是提供服务的still the preferred method,因为它允许不使用的树摇动服务.我敢打赌,您建议的Route.providers在延迟加载的路由(loadComponent()loadChildren(Routes))中是第二个首选,但文档并没有明确说明这一点.

Angular相关问答推荐

Angular 17上的material 工具提示的自定义样式

更改图表上的光标以进行zoom

首期日历发行

如何将管道异步化添加到不在html模板中的观察对象的Angular ?

无效的ICU消息.缺少';}';|Angular material 拖放(&A)

bootstrap 可折叠菜单在单击时未展开.Angular 应用程序

如何在Primeng中实现自定义排序

Angular-每2个流式传输多个HTTP调用

手动关闭 SSE 连接:Angular

Angular 13 Sass 模块无法在编译中正确导入文件

Summernote 文本区域的输入字段文本验证失败

Angular 项目构建仅在 GitHub Actions 上失败

Angular:将间隔与增量和减量相结合

带有 Angular 2 的 Django

使用directive指令将类添加到host元素中

Angular 6 - NullInjectorError:单元测试中没有 HttpClient 的提供者

实现自定义 NgbDateParserFormatter 来更改 NgbInputDatepicker 上输入值的格式是否正确?

如何将一个组件放入Angular2中的另一个组件中?

Angular - 工作区中未设置配置

默认情况下如何在Angular中 Select mat-button-toggle