Angular2中依赖注入的语法

时间:2017-09-17 15:35:28

标签: angular typescript dependency-injection

在Angular Components中,用typescript编写,可以将类成员(变量)声明为构造函数的参数。我的问题是为什么要这样做 为了使自己清楚,请参阅下面的片段。两者都有相同的含义。

  • 第一种是使用依赖注入机制定义私有成员的经典方法(就像在大多数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的人来说,第一种语法更清晰,更容易理解 所以,我想知道是否有任何特殊的原因,除了缩短(由于代码最终将被缩小/丑化,这并不重要),使用后者。感谢。

1 个答案:

答案 0 :(得分:4)

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

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) {  }
}

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