关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1

前言

前两天一个朋友想学习一下angular,在做官方的hero例子的时候,遇到了如下的问题,装饰器@Injectable()中不能传参,发截图问我是怎么回事,因为他完全是按照angular的官方文档敲的,这官方文档还能有错不成?让我们来一探究竟。
(他的是webstorm的IDE检测出来的错误,运行起来控制台会报一个一样的错误error:Expected 0 arguments, but got 1):
关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1_第1张图片

报错原因

网上有人提供了可避免错误的一种方式,就是不在这里面传参,老哥,你是认真的么。。。
首先,我们要知道,在@Injectable()中传参数是angular6以及之后版本才有的特性,之前的版本都无法传参,说到这里,好多朋友都反应过来了,是不是我的angular版本太低了?检查一下根目录的package.json文件(下图是我朋友截图发我的):
关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1_第2张图片
他的是angular5的版本,当然不能使用angular6的新特性啦!

深入了解

为啥我传了参就会报错呢?我们看一下内部是如何要求的,先上两张图:
angular5版本的Injectable:
关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1_第3张图片
angular7版本的Injectable:
(angular6之后都具有此特性,这里直接上angular7版本了):
关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1_第4张图片
从这两张图我们可以看出来,在angular6以及之后的版本我们是可以在@Injectable()中传参数进去,而angular5以及 之前版本,并不接受参数;所以这是一个版本问题引起的报错。

解决方法

有人这时候都在骂娘了,我进来看解决方法的,你给我分析一大堆干嘛,有啥用,别急,既然知道问题出在哪儿,我们就好解决了:

方法1、升级版本

既然angular5不行,那我就索性尝尝鲜,直接上最新版,螃蟹总要吃新鲜的,首先我们更新我们的脚手架,我的上一篇博客讲解了如何解决更新脚手架报错的问题《解决安装angular脚手架失败问题》
然后升级我们的项目依赖:
关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1_第5张图片
重新安装依赖包

npm install
方法2、使用其他方式注入

你不给我用我就不用呗,以前人家咋用我现在就老老实实咋用,不在@Injectable()中传参不就得了,日子还得过呢,我们其他的有两种注入方式:
1、在相应的模块中@NgModule()参数的providers中注入:
关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1_第6张图片
2、在具体的组件中注入:
关于angular官方例子服务依赖注入@Injectable()传参的时候报错:Expected 0 arguments, but got 1_第7张图片
以上两种方式都可以依赖注入service,但是可使用的范围不一样,具体场景大家自主选择。

结语

我们要知其然,还要知其所以然,网上给了我们解决方法,这远远不够,我们还要知道为什么会出现这样的问题!
希望能够解决大家工作和学习中的一些疑问,避免不必要的时间浪费,有不严谨的地方,也请大家批评指正,共同进步!
转载请注明出处,谢谢!
交流方式:QQ1670765991

你可能感兴趣的:(前端技术,angular)