Angular 6:在注入任何服务时使用访问修饰符



在学习教程时,我遇到了一个奇怪的场景。

在组件中注入服务时,如果您错过了访问修饰符,它会给您以下错误,但将其添加为私有或公共将运行良好。

如果我们错过了访问修饰符,我们在Angular中没有任何默认作用域吗?

export class UserDetailsComponent implements OnInit {
name="";
lastName="";
constructor(userService : UserServiceService) { }
ngOnInit() {
}
save(){
this.userService.saveUser();
}
}
类型"UserDetailsComponent"上不存在属性"userService"。

如果在构造函数参数前面加上访问修饰符(privateprotectedpublic(或readonly,它会自动得到"被提升";成为TypeScript中的类属性。此构造称为构造函数参数属性

如果没有前缀,构造函数参数只不过是一个方法参数,您必须从构造函数本身手动将其分配给声明的类属性。

来自手册:

TypeScript提供了特殊语法,用于将构造函数参数转换为具有相同名称和值的类属性。这些被称为参数属性,通过在构造函数参数前面加上可见性修饰符publicprivateprotectedreadonly之一来创建。得到的字段得到这些修饰符:

已经提供的所有答案都非常清楚,信息也很好。因此,简单地说,以下是正在发生的事情:

您的构造函数是一个函数。在任何编程语言中(到目前为止我遇到过(,函数的参数只存在于函数本身的范围内。因此,在构造函数中传递的参数在整个类中都不可用,除非它的值被显式地分配给类成员(如Samuel J Matthew.提供的第二段代码所示(

参数中的访问修饰符的作用是指示Angular使用提供的访问修饰符创建一个与参数同名的类成员,并将其初始化为参数类型的实例。换句话说,该参数将成为类成员/属性。如前所述,这被称为参数属性,这是一个非常合适的名称

Ken提供的文档非常有用。绝对值得一读。

Typescript为依赖项注入的通用模式提供了一个快捷方式。

你可以把它放在你的构造函数中:

this.userService = userService

并创建一个属性声明:

userService: UserService;

或者,只需在ctor函数参数上加上"public",Typescript就可以完成所有这些操作。"私人"也是如此。但是如果尝试在模板中使用私有属性,AOT可能会失败。

更多信息

当您没有为构造函数的参数提供任何访问说明符时,就会出现问题——它不会在类级别注册。相反,参数变量的作用域仅限于构造函数。为了使它在类中可用,我们给访问修饰符

以为例

export class UserDetailsComponent implements OnInit {
name="";
lastName="";
constructor(userService : UserServiceService) {
console.log(userService)
}
ngOnInit() {
}
save(){
this.userService.saveUser();
}
}

userService仅在构造函数内部可用如果您在构造函数中放置一个console.log(userService),您可能会得到一些控制台输出。

如果你不想指定任何访问修饰符,或者想分配给另一个类变量,你可以指定如下

export class UserDetailsComponent implements OnInit {
name="";
lastName="";
private _service
constructor(userService : UserServiceService) { 
this._service = userService;
}
ngOnInit() {
}
save(){
this._service.saveUser();
}
}

在上面的代码中,我已经将注入的userService分配给另一个类成员_service

最新更新