角度2注入不能继承

时间:2017-01-22 10:05:56

标签: angular dependencies

最近我们从Angular 2.0升级到2.4,从那时起我们就遇到了继承问题。 如果我们调用孩子,所有依赖关系都会被定义。

  • 孩子没有构造函数,这意味着它使用父构造函数。

这是代码:

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

    }

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

可能是什么原因?

1 个答案:

答案 0 :(得分:1)

如果没有完整的例子,我们只能猜测。考虑使用以下作为请求的minimal, complete and verifiable example的起点。

显示组件继承和服务注入协同工作的代码示例:

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 { 

}

请参阅此plunker以获取一个工作示例:http://embed.plnkr.co/5VNDF6/

我(也是)在SO中提供示例的新手,所以我可能错过了一些最佳实践。希望人们会对改进建议发表评论。

总的来说,这个组件继承并不是最好的做事方式 - 我更喜欢组合而不是继承组件。继承 - 如果确实需要 - 可能更适合服务:http://embed.plnkr.co/jWiOTg/