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

3lxsmp7m  于 2023-03-09  发布在  TypeScript
关注(0)|答案(3)|浏览(146)

我可以这样做吗:

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);
     }
inkz8wg9

inkz8wg91#

您可以执行以下操作:

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

喷油器Angular /芯

fzsnzjdm

fzsnzjdm2#

不,你不能这样做。可注入服务将在构造函数被调用时被注入。
目标是简化构造函数签名。
没有必要简化构造函数签名。为了可读性,可以将它们写在多行中。
因此所有子组件都不需要在其构造函数中指定appConfig
在你的例子中,只有继承你的类的类才能访问它。但是如果你指的是子组件,那些在你的组件中使用的子组件,它们不能访问父组件中的变量。你需要传递它们。

    • 已更新**

您的this.config在继承的组件中总是可见的。不需要再次在SportTemplates组件中注入appConfig

sgtfey8w

sgtfey8w3#

现在(从Angular v14开始)可以通过@angular/core中的inject函数来完成,它的行为与装饰器相同,可以用于属性初始化器:

@Directive()
export abstract class BaseComponent {
    protected appConfig = inject(AppConfig)
}

因此,您不再需要调用super(appConfig)

相关问题