我正在努力学习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)

好我以前try 使用支持函数获取路由参数时遇到了一个问题:

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?

推荐答案

如回答中所述,它只能在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相关问答推荐

Transloco不加载Angular 17中的翻译

Swiper 11角17 SSR Swiper断点不工作

ANGLING HTTP.GET()返回包含数据的数组

Angular 应用程序未在Azure应用程序服务中运行

使用BLOB数据类型时,HTTPCLIENT中可能存在错误

Ng serve不工作,没有错误或消息来显示问题所在

Angular 16 Auth Guard在具有0的服务时给出Null Injector错误;httpclient;被注入

当快速拖动光标时会丢失元素 - Angular

如何在独立组件中导入Angular innerHTML

PrimeNG 避免在同一位置使用不同键的 cogo toast 重叠

从 angular 11 升级到 angular 12 后,我的项目没有使用优化参数进行编译

如何在 Angular 2 中使用 protractor ?

错误:您要查找的资源已被删除、名称已更改或暂时不可用

在Angular2中获取服务的域名

Angular 2+ ngModule 中导入/导出的作用

Angular2material对话框自动关闭

交替行 colored颜色 angular material表

如何在项目中导入 Angular material?

缺少带有Angular的语言环境XXX的语言环境数据

如何从指令访问主机组件?