Angular 2:属性注入而不是构造函数注入

时间:2017-02-13 10:21:01

标签: angular typescript dependency-injection

我可以这样做:

export class BaseComponent {
protected config: IConfig;

@Inject(AppConfig) protected appConfig: AppConfig;

constructor() 
{ 
    this.config = this.appConfig.getConfig();    
}

而不是:

export class BaseComponent {
config: IConfig;

constructor(
    private appConfig: AppConfig,
    ) 
{ 
    this.config = appConfig.getConfig();    
}

目标是简化构造函数签名,因此所有子组件都不需要在构造函数中指定appConfig。所以从BaseComponent继承的组件看起来像这样:

@Component({
    selector: 'sport-templates',
    templateUrl: 'templates.component.html',
    styleUrls: [ 'templates.component.scss' ],
    encapsulation: ViewEncapsulation.None
})
export class SportTemplates extends BaseComponent implements OnInit {

    constructor() {
        super();
    }

而不喜欢这样:

@Component({
    selector: 'sport-templates',
    templateUrl: 'templates.component.html',
    styleUrls: [ 'templates.component.scss' ],
    encapsulation: ViewEncapsulation.None
})
export class SportTemplates extends BaseComponent implements OnInit {

    constructor(appConfig: AppConfig) {
        super(appConfig);
     }

2 个答案:

答案 0 :(得分:1)

你可以这样做:

myService: MyService = this.injector.get(MyService);
constructor(private injector:Injector) {}

Injector位于@ angular / core

答案 1 :(得分:0)

不,你不能这样做。 可注入服务将在调用构造函数时注入。

  

目标是简化构造函数签名。

无需简化构造函数签名。为了便于阅读,您可以将它们写成多行。

  

所以所有子组件都不需要在其中指定appConfig   构造

在您的情况下,只有继承您的类的类才能访问它。但是,如果您指的是组件中使用的子组件,则它们无法访问父组件中的变量。你需要传递它们。

<强>已更新

您的this.config始终在继承的组件中可见。无需再次在appConfig组件中注入SportTemplates