Question

您好我正在尝试创建一个从另一个组件扩展的组件，但代码变得非常笨拙，因为我必须将构造函数参数传播到子组件。有没有更好的方法来构造以下代码？

基类是：

import { alerts } from './alerts';
import { BaseFirebaseDaoService } from './../providers/base-firebase-dao-service';
import { Injectable,Component,Inject } from '@angular/core';
import { NavParams } from 'ionic-angular';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { FirebaseListObservable } from 'angularfire2';

@Injectable()
@Component({   
     templateUrl: './dummy.html'
})
export class BaseFormHandler<T extends BaseFirebaseDaoService> {
  form: FormGroup;
  item;

  dao:T;
  constructor(public navParams: NavParams,
    public fb: FormBuilder, public _alerts:alerts) {
    this.item = this.navParams.get("item");    
    this.buildForm();
  }

  buildForm(){
    //to be ovveride in sub clusses.
  }

  remove(){    
    this.dao.remove(this.item.$key)
    .then((a:void) => {
      this._alerts.presentToast("removed success");
    })
    .catch((a:Error) => {this._alerts.presentToast("remove fail")});
  }
  submit() {
    let key = this.item.$key;
    this.dao.update(key, this.form.value);
  }
}

这是扩展类：

import { alerts } from './../../shared/alerts';
import { BaseFormHandler } from './../../shared/base-form-handler';
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MemberService } from '../../providers/member-service';
import { NavParams } from 'ionic-angular';
import { AngularFire } from 'angularfire2';

@Component({
  templateUrl: 'members-form-page.html'
})
export class MembersFormPage extends BaseFormHandler<MemberService>{
  constructor(public navParams: NavParams,
    public fb: FormBuilder, af: AngularFire, public _alerts: alerts) {
    super(navParams, fb, _alerts);
    this.dao = new MemberService(af);
  }
  buildForm() {
    this.form = this.fb.group({
      name: [this.item.name, Validators.required],
      email: [this.item.email, Validators.required]
    });
  }
}

所以我必须始终从所有子类发送（并导入）构造函数的参数public navParams: NavParams, public fb: FormBuilder, public _alerts:alerts，尽管子类不使用它们。这份清单可以更长...... 这种实施的任何替代方式？

Answer 1

不知道你是否仍然需要这个，但今天我遇到了同样的问题，我在以下2个链接中找到了一些帮助：

Getting instance of service without constructor injection

https://github.com/angular/angular/issues/4112#issuecomment-153811572

基本上，我创建了一个包含Angular Injector的全局变量，我在“Base”类中使用它来解析所有依赖项。这样我就不需要在扩展该基类的每个Component中注入它们。

基类：

export class BaseClass  {

    protected aService: AService;
    protected bService: BService;

    constructor() {
        this.aService = appInjector().get(AService);
        this.bService = appInjector().get(BService);
    }

    ...

}

AppInjector定义：

import {Injector} from '@angular/core';

let appInjectorRef: Injector;
export const appInjector = (injector?: Injector):Injector => {
    if (injector) {
        appInjectorRef = injector;
    }
    return appInjectorRef;
};

我在“root”模块boostrap之后初始化AppInjector全局变量（在我的情况下在app.main.ts中）：

platformBrowserDynamic().bootstrapModule(CpcAppModule)
.then((modRef) => {
    appInjector(modRef.injector);
    console.log(`Application started`)
})
.catch((err) => console.error(err));

希望它有所帮助。

Angular2 - 扩展组件

1 个答案: