【问题标题】:Typescript dependency injection public vs privateTypescript 依赖注入公共与私有
【发布时间】:2018-03-17 17:00:43
【问题描述】:

使用 public 和 private 注入服务有什么区别。我看到大多数示例在 angular 组件中使用 private 关键字。使用 public 会有什么影响吗? 例如

constructor(public carService: CarService) { }

对比

constructor(private carService: CarService) { }

【问题讨论】:

    标签: angular typescript


    【解决方案1】:

    除了前面的答案......任何标记为私有的东西也不能被组件的模板访问。 (私有成员可以在使用 JIT 时访问,例如在开发时,但不能在使用 AOT 时访问,例如在生产时。)

    所以在你的模板中,你只能做*ngIf='carService.isValid' 如果注入的服务被标记为public

    但实际上,最佳实践是将任何服务属性/方法包装在组件属性/方法中,并让模板绑定/调用组件的属性或方法。

    类似这样的:

       get isValid(): boolean {
          return this.carService.isValid;
       }
    

    然后像这样访问它:*ngIf='isValid'

    【讨论】:

    • 我尝试使用语法,因为您设置了“get isValid(): boolean{..},但至少对于我的设置而言,isValid(): boolean {...} 对函数有效签名。
    • 以上是getter。您不会将其称为方法,而是将其称为属性分配。如果您使用*ngIf='isValid' 而不是*ngIf='isValid()',它应该可以工作
    • 吸气剂也是如此。
    • 您能否指出文档来支持您的陈述,即“最佳实践是将任何服务属性/方法包装在组件属性/方法中,并将模板绑定到/调用组件的属性或方法” ?这听起来像是很多不必要的工作。为什么不创建服务public readonly 以保护它在编译时免受未来开发人员的影响,并避免编写所有额外的样板文件?
    • 向 Angular GDE 社区提出了这个问题......多种想法。 (1) 使用编辑器工具完成的任何重构(重命名等)都不会在模板中找到实例。 (2) 将推荐的视图/模型方法与声明的 Observable 流一起使用,这不是问题。 (3) 一次性的,似乎还可以。
    【解决方案2】:

    答案很简单:当你不需要在当前类/组件之外使用它们时,你必须创建私有变量,否则,你应该创建公共变量。还有一件事:您还可以使用私有变量并通过称为 getterssetters 的特殊函数从外部访问它们。例如:

    private _customValue: any;
    
    set customValue(newValue: any): void {
      this._customValue = newValue;
    }
    
    get customValue(): any {
      return this._customValue;
    }
    

    注意,_customValue 是私有的,但您可以通过 customValue 的操作从类外部设置/获取此值:

    classInstance.customValue = 'newValue';
    console.log(classInstance.customValue);
    

    需要说明的是,方法名称前的setget 关键字不是非常需要,它们更多是为了澄清。

    【讨论】:

    • 您不调用 getter 和 setter,使用此代码您创建了一个名为 getCustomValue 的只读属性和一个名为 setCustomValue 的不相关的只写属性。它们都应该被命名为 customValue 并被视为属性
    【解决方案3】:

    如果您有服务,例如:

    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    
    export class CarService {
    
      constructor() { }
    
      public design = {
        "color": "blue"
      }
    }
    

    在你要实现服务的构造函数中

    constructor(private carService: CarService) { }
    

    您可以使用正常的方法返回服务

     getCarService() {
          return this.carService;
     }
    

    在你的模板中你可以做

    <div>{{getCarService().design.color}}</div>
    

    【讨论】:

    • 在模板中调用方法不是个好主意
    猜你喜欢
    • 2020-10-13
    • 2021-01-25
    • 2013-04-10
    • 2016-12-03
    • 2020-02-13
    • 2015-11-05
    • 2015-08-28
    • 2014-12-04
    • 2020-02-05
    相关资源
    最近更新 更多