在Angular 12中,强制注射的服务是必不可少的

发布于 2025-01-25 17:07:11 字数 1148 浏览 3 评论 0原文

我正在尝试了解@Injectable vs @inject。在其中找到了许多文章,以及在服务上使用@Injectable的最佳实践。

但是我相信这两个片段(UserService)的行为应该相同。

import { Inject, Injectable } from "@angular/core"

export class NewUserService {
  constructor() {
    console.log('NewHerorService')
  }
}

export class UserService {
  constructor(@Inject(NewUserService) private newUserService: NewUserService) {
    console.log('test')
  }
}

**VS** 

@Injectable()
export class UserService {
  constructor(private newUserService: NewUserService) {
    console.log('test')
  }
}

这在Angular 8中正常工作(两者都相同)。

但是在Angular 12中相同的事情给出了错误:

src/app/app.module.ts中的错误(15:15)类“用户服务”不能 可以通过依赖注入创建,因为它没有角度 装饰师。这将在运行时导致错误。

要么将@injectable()装饰添加到“ userervice”,要么配置 一个不同的提供商(例如具有“ useFactory”的提供商)。

样本链接

:在其中进行了更多信息之后,如果我设置了“ enableivy”:false in .tsconfig.json of Angular 12版本,那么它不会抛出任何错误且工作与Angular 8相同。

但仍然不知道为什么?

I'm trying to understand @injectable vs @Inject. Found many articles on it, and its best practice to use @Injectable on Service.

But I believe these two snippet(UserService) should behave same.

import { Inject, Injectable } from "@angular/core"

export class NewUserService {
  constructor() {
    console.log('NewHerorService')
  }
}

export class UserService {
  constructor(@Inject(NewUserService) private newUserService: NewUserService) {
    console.log('test')
  }
}

**VS** 

@Injectable()
export class UserService {
  constructor(private newUserService: NewUserService) {
    console.log('test')
  }
}

And this is working fine(both behaving same) in Angular 8.

But the same thing in Angular 12 giving error:

Error in src/app/app.module.ts (15:15) The class 'UserService' cannot
be created via dependency injection, as it does not have an Angular
decorator. This will result in an error at runtime.

Either add the @Injectable() decorator to 'UserService', or configure
a different provider (such as a provider with 'useFactory').

Sample links
Angular 8
Angular 12

Update: After digging some more into it, found if I set "enableIvy": false in .tsconfig.json of angular 12 version, then it not throws any error and works same as angular 8.

But still don't know why?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

奢欲 2025-02-01 17:07:11

注射和注射量之间的区别:

注入

注入装饰器使您可以定义要用于注入的提供者。在示例中bellow(取自 Angular依赖性注入页面),Browser_Storage是用作存储服务的提供商。

import { Inject, Injectable, InjectionToken } from '@angular/core';

export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
  providedIn: 'root',
  factory: () => localStorage
});

@Injectable({
  providedIn: 'root'
})
export class BrowserStorageService {
  constructor(@Inject(BROWSER_STORAGE) public storage: Storage) {}
}

注射

可注射的装饰器允许将类定义为可注射剂,这意味着您可以将其注入另一个组件或服务上。 类的服务

constructor(private storage : Storage){}

请注意,如果您注入诸如Angular的默认行为之

是使用new Storage()进行实例化,以了解有关提供商的更多信息,请参见 Angular依赖提供者页面

如有需要,请随时要求澄清!

The difference between Inject and Injectable:

Inject

The Inject decorator allows you to define what provider do you want to be used for the injection. In the example bellow (taken from Angular Dependency Injection page), the BROWSER_STORAGE is used as the provider for the Storage service.

import { Inject, Injectable, InjectionToken } from '@angular/core';

export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
  providedIn: 'root',
  factory: () => localStorage
});

@Injectable({
  providedIn: 'root'
})
export class BrowserStorageService {
  constructor(@Inject(BROWSER_STORAGE) public storage: Storage) {}
}

Injectable

The Injectable decorator allows to define a class as Injectable, meaning you can Inject it on another component or service. Note the if you inject the service like

constructor(private storage : Storage){}

The default behavior of Angular is to instanciate using new Storage()

To learn more about providers see the Angular Dependency providers page

Feel free to ask for clarification if needed!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文