[英]Angular2 - extending components
嗨,我试图创建一个从另一个组件扩展的组件,但是代码变得非常笨拙,因为我必须将构造函数参数传播到子组件。 有没有更好的方法来构造以下代码?
基类是:
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
,尽管子类未使用它们。 此列表可以更长……实现这种方法的替代方法是什么?
不知道您是否仍然需要此功能,但是我今天遇到了同样的问题,并且在以下两个链接中找到了一些帮助:
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;
};
我在“根”模块boostrap之后初始化AppInjector全局变量(在我的情况下为app.main.ts):
platformBrowserDynamic().bootstrapModule(CpcAppModule)
.then((modRef) => {
appInjector(modRef.injector);
console.log(`Application started`)
})
.catch((err) => console.error(err));
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.