如何将注入服务从超类继承到 Angular 2 中的子类组件中

Question

从 Angular v2.0 开始，组件之间支持继承。

给定一个父类，并通过依赖注入向构造函数提供服务，是否可以定义一个子类来扩展（或继承）其父类，以便它可以访问父类的服务？

import {MyService} from './my.service'
import {OnInit} from '@angular/core'

@Component({
   selector: 'parent-selector',
   providers: [MyService],
   templateUrl: 'my_template.html'
})
export class ParentClass implements OnInit{
    public foobar: number;
    constructor(protected _my_service: MyService){};

    ngOnInit(){
        foobar = 101;
    }
}

@Component({
   selector: 'child-selector',
   templateUrl: 'my_template.html'
})
export class ChildClass extends ParentClass{
    public new_child_function(){
        // This prints successfully
        console.log(this.foobar);
        // This throws an error saying my_service is "undefined"
        this._my_service.service_function();
    }
}

当我们尝试从子类调用

new_child_function()

时，它成功访问其父成员

foobar

，但是对

this._my_service.service_function()

的调用给了我们以下不太有趣的错误：

无法读取未定义的属性“get”

在这种特定情况下，似乎父项注入的服务不适用于子项。我想知道：

这是 Angular2 组件继承支持的当前
1. 已知限制吗？
此代码示例是否缺少/错误？
这是 Angular2 对组件继承支持的一个错误吗？

Answer 1

使其成为

public

或

protected

，即

constructor(protected _my_service: MyService){};

如果您不在构造函数中使用

protected

、

private

或

public

，例如DI，则变量

_my_service

的范围是您无法从其他函数使用的

constructor { }

的范围。 

---

您可以阅读有关

参数属性以及如何声明和访问它们的更多信息。

参数属性是通过在构造函数参数前加上

辅助功能修饰符 或 readonly

 或两者来声明的。