在Angular14 -Inject（）中正确理解注入必须从注射环境中调用

Question

我正在尝试学习Angular 14中的更改，尤其是Inject（）功能，我能够将模块注入功能，而我不需要为此创建特殊服务。我想我错了。

我正在尝试创建一些静态功能，以使用软件包ngx-toastr发送零食消息，但是此软件包与我的问题无关。我如何正确地实现显示零食消息的功能，同时向它们注入他们需要操作的所需模块。

这是我的messages.ts file：

import {inject} from '@angular/core';
import {ToastrService} from 'ngx-toastr';


export const snackMsgSuccess = (msg: string, title?: string) => {
  const toaster = inject(ToastrService);
  toaster.success(msg, title, {
    easeTime: 1000
  });
};


export const snackMsgInfo = (msg: string, title?: string) => {
  const toaster = inject(ToastrService);
  toaster.info(msg, title, {
    easeTime: 1000
  });
};

export const snackMsgWarn = (msg: string, title?: string) => {
  const toaster = inject(ToastrService);
  toaster.warning(msg, title, {
    easeTime: 1000
  });
};


export const snackMsgError = (msg: string, title?: string) => {
  const toaster = inject(ToastrService);
  toaster.error(msg, title, {
    easeTime: 1000
  });
};

我有以下错误：

Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context (a constructor, a factory function or a field initializer)

嗯...我在尝试具有支持功能以获取路线参数之前遇到了问题：

export const routeParam$ = (key: string) => {
  const activatedRoute = inject(ActivatedRoute);

  return activatedRoute.params.pipe(
    pluck(key),
    filter(r => r !== null),
    distinctUntilChanged()
  );
};

而且我只能能够用作具有任务的组件中的字段初始化器：可观察＆lt; string＆gt; = RouteParam $（'task'）;

错误消息非常清楚...但是仍然..我是Angular14的新手，我认为注入可以让我这样做。否则对我来说并不有用。

目前，我将其作为服务移动。

import {Injectable} from '@angular/core';
import {ToastrService} from 'ngx-toastr';

@Injectable({
  providedIn: 'root'
})
export class MsgService {

  constructor(private toaster: ToastrService) {
  }

  public snackMsgSuccess = (msg: string, title?: string) => {
    this.toaster.success(msg, title, {
      easeTime: 1000
    });
  };


  public snackMsgInfo = (msg: string, title?: string) => {
    this.toaster.info(msg, title, {
      easeTime: 1000
    });
  };

  public snackMsgWarn = (msg: string, title?: string) => {
    this.toaster.warning(msg, title, {
      easeTime: 1000
    });
  };


  public snackMsgError = (msg: string, title?: string) => {
    this.toaster.error(msg, title, {
      easeTime: 1000
    });
  };
}

但是，这是实施它的唯一方法吗？即使在Angular14中？

Answer 1

由于Angular 14.1，您可以使用 runinContext ：

简单示例：简单示例：

class Foo {
    constructor(private injector: EnvironmentInjector) {
        setTimeout(() => {
            // can't inject()

            this.injector.runInContext(() => {
                inject(MyService) // fine
            });
        }, 1000);
    }
}

Answer 2

V16+使用 runinInIndoctionContext

injector = inject(EnvironmentInjector);

constructor(private injector: EnvironmentInjector)

在

runInInjectionContext(this.injector, snackMsgSuccess);

Answer 3

您可能会收到此错误的原因之一是因为您依赖于与主软件包不同版本的库，并且您正在将该库的模块导入到角度模块中。

您应该能够通过查看node_modules/some_library/node_modules来确定这一点，并查看那里是否存在@angular库。

这个答案是解决方案。适当的解决方案是确保您的主包和您所依赖的库是使用@Angular软件包的相同版本。一种方法是确保您拥有相同的主要版本，并将^用作@Angular packages in package.json < /代码>。

Answer 4

如果您使用Angular 17.2和库17.3，则有关版本的问题。绝对您可以获得此错误

Answer 5

如答案中所述，只能在DI系统对依赖性实例化期间初始化。您可以通过创建高阶功能来解决此问题。

export const snackMsgSuccess = () => {
  const toaster = inject(ToastrService);
  return (msg: string,title?: string)=>{
    toaster.success(msg, title, {
      easeTime: 1000
    });
  }
};

component.ts

snackMsgSuccess = snackMsgSuccess();


ngOnInit(){
   this.snackMsgSuccess('Success','Test');
}

更新本版本功能中的Angular 14.1

可以使用RunIncontext API在功能主体内部使用。

有关更多信息

Answer 6

对于使用NX和Angular 15的Angular项目，我遇到了同样的问题，而无需违反此规则。我已经解决了它，将以下行添加到compileroptions.paths 在tsconfig.base.json文件中：

“@angular/*”：[“ node_modules/@anguarl/@anguarl/*”]