【问题标题】:Syntax for Dependency Injection in Angular2Angular2中依赖注入的语法
【发布时间】:2017-09-18 02:05:20
【问题描述】:

在使用打字稿编写的 Angular 组件中,可以将类成员(变量)声明为构造函数的参数。我的问题是为什么要这样做。
为了清楚起见,请参阅下面的 sn-ps。两者具有相同的含义。

  • 第一种是使用依赖注入机制定义私有成员的经典方法(在大多数 OO 语言中都是如此)。
  • 如果我没记错的话,后者是 TypeScript 的特殊性。

export class HeroListComponent implements OnInit {
    // private member declaration
    private heroService:HeroService;

    // constructor signature
    constructor(service:HeroService) {
        // private member assignment
        this.heroService = service;
    }
}

export class HeroListComponent implements OnInit {
    // here the private member is declared inside the constructor signature
    constructor(private heroService:HeroService) { }
}

在我看来,第一种语法对于不熟悉 TypeScript 的人来说更清晰、更容易理解。
所以,我想知道是否有任何特殊的原因,除了更短(这并不重要,因为代码最终会被缩小/丑化),使用后者。谢谢。

【问题讨论】:

  • 这与 Angular 本身无关。

标签: angular typescript dependency-injection


【解决方案1】:

编辑:此答案解决了原始问题(现已编辑),第二个示例如下所示:

export class HeroListComponent implements OnInit {
    // here the private member is declared inside the constructor signature
    constructor(private service:HeroService) { 
        this.heroService = service;
    }
}

在第二个示例中,您实际上是在创建两个类属性。 this.servicethis.heroService 都将存在于您的对象中。

你的第二个例子是这样的:

export class HeroListComponent implements OnInit {
    private heroService: HeroService;
    private service: HeroService;

    constructor(service:HeroService) {
        this.service = service;
        this.heroService = service;
    }
}

如果您的类属性可以与构造函数中的参数具有相同的名称,那么第二个示例中的样式将使您受益。如果它们都可以命名为heroService,那么您可以这样做:

export class HeroListComponent implements OnInit {
    constructor(private heroService:HeroService) {  }
}

好处只是它消除了混乱。类中属性的声明和构造函数参数给该类属性的赋值都消失了。它可能对您来说不一定更清晰或更易读。

【讨论】:

  • 你说得对,我编辑了代码以避免混淆。因此,您所解释的适用于第一个 sn-p :在这种情况下,会创建两个属性:“service”和“heroService”,这是 TypeScript 解释器的一种行为。
  • @CédricFrançoys 我希望这也回答了你的主要问题 - 这种风格的唯一好处是它更简洁。
猜你喜欢
  • 2015-11-05
  • 2016-07-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-26
  • 2017-01-11
  • 2017-02-07
  • 1970-01-01
相关资源
最近更新 更多