如何正确设计“基础”Angular/Ionic 类答案

【问题标题】：How to properly design a 'base' Angular/Ionic class如何正确设计“基础”Angular/Ionic 类
【发布时间】：2018-01-02 19:57:11
【问题描述】：

考虑下面的示例基类：

import { FormBuilder, FormGroup } from '@angular/forms';
import { NavParams, LoadingController, Loading, Events } from 'ionic-angular';

import { IBaseService } from '../../data/interface/ibase-service';
import { MessageUtil } from '../../message/message-util';

export class FormPage<T> {
    public form: FormGroup;
    public current: T;
    public submitAttempt: boolean;
    public loading: boolean;
    public mode: string;
    public id: number;
    public loader: Loading;

    constructor(public service: IBaseService<T>, 
                public fb: FormBuilder, 
                public events: Events,
                public messageUtil: MessageUtil, 
                public navParams: NavParams,
                public loadingCtrl: LoadingController) {
        let me = this;

        me.mode = navParams.get('mode');
        me.id = navParams.get('id');
    }
}

现在，我要做的是让实现类只提供/注入“服务”参数，而无需传递所有其他基本参数。下面是实现类：

import { Component } from '@angular/core';
import { NavParams, IonicPage, LoadingController, Events } from 'ionic-angular';
import { FormBuilder, FormGroup } from '@angular/forms';

import { MessageUtil } from '../../framework/message/message-util';
import { FormPage } from '../../framework/base/page/form-page';

import { UserService } from '../../providers/user-service';
import { User } from '../../models/user';

@IonicPage()
@Component({
  selector: 'page-edit-user',
  templateUrl: 'edit-User.html',
  providers: [
    UserService,
    MessageUtil
  ]
})
export class EditUserPage extends FormPage<User> {

  //This is the reality
  constructor(public service: UserService, 
              public fb: FormBuilder,
              public events: Events,
              public messageUtil: MessageUtil, 
              public navParams: NavParams, 
              public loadingCtrl: LoadingController) {
    super(service, fb, events, messageUtil, navParams, loadingCtrl); 
  }

  //This is my goal
  constructor(public service: UserService) {
    super(service); 
  }
}

如果可能，目标是不传递所有角度和离子组件，因为它们已经在基类级别提供/声明，并且实现类应该只处理服务以避免样板代码。

【问题讨论】：

请看this SO answer。这就是我在 Ionic Apps 中处理它的方式。
@sebaferreras 我喜欢你所做的方法，尽管我有点担心这是否会使课程容易受到副作用的影响。尽管我看到您通过公共方法暴露了注入的类，但 w/c 会给人一种印象，即它们是类输入的一部分。有趣。
是的，这个想法是避免每个页面的构造函数中的所有参数，并且还包括一些帮助程序以避免需要 10-15 行代码来显示警报消息，等等。它不包含在该答案中，但实际上我已经定义了两个基本页面：BasePage 和UserBasePage。后者有一个守卫在进入之前检查用户是否已登录。所以在BasePage 中我还添加了redirectTo 助手，来处理用户未登录的情况，所以我抓住了守卫的返回，如果它是假的，它会显示登录页面。
什么副作用？

标签： angular typescript dependency-injection ionic2 ionic3

【解决方案1】：

如果可能，目标是不通过所有角度和离子成分因为它们已经在基类级别提供/声明了

不，不提供。是你调用super(...)提供所需的组件，所以你无法避免

【讨论】：

感谢您的回答。实际上我已经找到了一种将依赖项捆绑到一个类中的方法，这样实现类就只会传递一个类而不是多个类。
你能分享那个解决方案吗？