角2注入不能继承 [英] angular 2 injection not work in inheritance

问题描述

最近我们从Angular 2.0升级到2.4，从那时起我们就有继承问题。
如果我们调用该子项，所有依赖项都将被定义。

• 该子代没有构造函数，父亲构造函数。

这是代码：

 code> @Injectable（）
 export class ChildComponent extends ParentComponent {
 
} 
 
 
 export class ParentComponent实现OnInit，AfterViewInit，AfterViewChecked { 
 
构造函数（protected _activitySettingsControlService：ActivitySettingsControlService，
 protected _changeDetectionRef：ChangeDetectorRef，
 protected _elemRef：ElementRef，
 protected _apiService：ApiService）{
 
} 
  

所有依赖关系都以这种方式取消。

可能是什么原因？

解决方案

没有一个完整的例子，我们只能猜测。请考虑使用以下作为请求的最小化，完整和可验证的示例的起点。

显示组件继承和服务注入的代码示例一起工作：

 从'@ angular / core'导入{Component，Injectable}; 
 
 @Injectable（）
 export class SomeDependency {
 public foo（）{
 return'bar'; 
} 
} 
 
 @Component（{
 selector：'parent-comp'，
 template：`< h1> Hello from ParentComponent {名称}}< / h1>`，
 providers：[
 SomeDependency 
] 
}）
 export class ParentComponent {
 public name; 
 constructor（private dep：SomeDependency）{
 this.name = this.dep.foo（）; 
} 
} 
 
 @Component（{
 selector：'child-comp'，
 template：`< h1> Hello来自ChildComponent。SomeDependency返回{{name}}< / h1>`，
 providers：[
 SomeDependency 
] 
}）
 export class ChildComponent extends ParentComponent {
 
} 
 
 
 @Component（{
 selector：'my-app'，
 template：`< child-comp>< / child -comp>`
}）
导出类AppComponent {
 
} 
  

看到这个招牌的工作实例： http://embed.plnkr.co/5VNDF6 /

我也是在SO中提供示例的新功能，所以我可能错过了一些最佳做法。希望人们会对改进建议发表评论。

一般来说，此组件继承不是最好的方式 - 我喜欢组合对组件的继承。继承 - 如果真的需要 - 可以更适合服务： http://embed.plnkr.co/jWiOTg /

recently we upgraded from Angular 2.0 to 2.4 and since then we have problems with inheritance. all dependencies gets undefined if we call the child.

• the child don't have a constructor, what means it uses the father constructor.

this is the code:

@Injectable()
export class ChildComponent extends ParentComponent {

}


export class ParentComponent implements OnInit, AfterViewInit, AfterViewChecked {

    constructor(protected _activitySettingsControlService: ActivitySettingsControlService,
                protected _changeDetectionRef: ChangeDetectorRef,
                protected _elemRef: ElementRef,
                protected _apiService: ApiService) {

    }

all dependencies are undefind in this way.

what can be the reason ?

解决方案

Without a complete example, we can only guess. Consider using the below as a starting point for the requested minimal, complete and verifiable example.

Code sample showing component inheritance and service injection working together:

import { Component, Injectable } from '@angular/core';

@Injectable()
export class SomeDependency {
  public foo() {
    return 'bar';
  }
}

@Component({
  selector: 'parent-comp',
  template: `<h1>Hello from ParentComponent {{name}}</h1>`,
  providers: [
    SomeDependency
  ]
})
export class ParentComponent { 
  public name;
  constructor(private dep: SomeDependency) {
    this.name = this.dep.foo();
  }
}

@Component({
  selector: 'child-comp',
  template: `<h1>Hello from ChildComponent. SomeDependency returned {{name}}</h1>`,
  providers: [
    SomeDependency
  ]
})
export class ChildComponent extends ParentComponent { 

}


@Component({
  selector: 'my-app',
  template: `<child-comp></child-comp>`
})
export class AppComponent { 

}

See this plunker for a working example: http://embed.plnkr.co/5VNDF6/

I am (also) new to supplying examples in SO, so I might have missed some best practices. Hopefully people will comment on suggestions for improvements.

Of general note, this component inheritance is imho not the best way of doing things - I'd favor composition over inheritance for components. Inheritance - if really required - could be a better fit for services: http://embed.plnkr.co/jWiOTg/

这篇关于角2注入不能继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！