正确理解 angular14 中的注入 - 必须从注入上下文中调用 inject()

Question

我正在尝试学习 angular 14 的变化，尤其是

inject()

功能，我可以将模块注入功能，我不需要为此创建特殊服务..但我想我做错了.

我正在尝试创建一些静态函数来使用包

ngx-toastr

发送零食消息，但这个包与我的问题无关。我如何正确地实现显示零食消息的功能，同时向它们注入它们需要操作的必需模块。

这是我的

messages.ts

文件：

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()
  );
};

我只能在具有

task: Observable<string> = 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

如答案中所述，它只能在 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 2

在 v16+ 中使用 runInInjectionContext

injector = inject(EnvironmentInjector);

或

constructor(private injector: EnvironmentInjector)

然后

runInInjectionContext(this.injector, snackMsgSuccess);

Answer 3

从 Angular 14.1 开始，您可以使用 runInContext :

简单的例子：

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

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