您好我正在尝试创建一个从另一个组件扩展的组件,但代码变得非常笨拙,因为我必须将构造函数参数传播到子组件 . 有没有更好的方法来构造以下代码?
基类是:
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
,尽管子类不使用它们 . 这个列表可以更长......这种实现的替代方法是什么?
1 回答
不知道你是否仍然需要这个,但今天我遇到了同样的问题,我在以下2个链接中找到了一些帮助:
Getting instance of service without constructor injection
https://github.com/angular/angular/issues/4112#issuecomment-153811572
基本上,我创建了一个包含Angular Injector的全局变量,我在“Base”类中使用它来解析所有依赖项 . 这样我就不需要在扩展该基类的每个Component中注入它们 .
基类:
AppInjector定义:
我在“root”模块boostrap之后初始化AppInjector全局变量(在我的例子中在app.main.ts中):
希望能帮助到你 .