Angular 4重构构造函数答案

【问题标题】：Angular 4 refactoring constructorAngular 4重构构造函数
【发布时间】：2017-10-30 02:46:45
【问题描述】：

假设我有以下文件

blog.abstract.ts

import { Component, ElementRef } from '@angular/core';
import { ItemService } from 'services/item/item.service';
import { Router } from '@angular/router';
import { ModalService } from 'services/modal/modal.service';

export class AbstractBlog {
  constructor(protected modalService: ModalService, protected router: Router, protected itemService: ItemService) { }
  // use services
}

blog1.component.ts

import { Component, ElementRef } from '@angular/core';
import { ItemService } from 'services/item/item.service';
import { Router } from '@angular/router';
import { ModalService } from 'services/modal/modal.service';

@Component({
  selector: 'app-blog-1',
  templateUrl: 'blog-1.html',
})
export class Blog1Component extends AbstractBlog {
  constructor(private _elementRef: ElementRef, modalService: ModalService, router: Router, itemService: ItemService) {
    super(modalService, router, itemService);
  }
  // use services & _elementRef
}

blog2.component.ts

import { Component, ElementRef } from '@angular/core';
import { ItemService } from 'services/item/item.service';
import { Router } from '@angular/router';
import { ModalService } from 'services/modal/modal.service';

@Component({
  selector: 'app-blog-2',
  templateUrl: 'blog-2.html',
})
export class Blog2Component extends AbstractBlog{
  constructor(modalService: ModalService, router: Router, itemService: ItemService) {
    super(modalService, router, itemService);
  }
  // use services
}

我想简化构造函数并避免导入每个服务并在每次需要新的 BlogComponent 时使用 super(....) 方法。
假设有数百个 BlogComponent，每个都在不同的文件夹中。
对于这些模块中的每一个，我都需要扩展 AbstractBlog、导入服务并使用相同的参数调用 super 方法。
现在，如果我想在 AbstractBlog 的构造函数中添加另一个服务，我将不得不更新一百个文件以匹配构造函数。
有没有更好的方法来处理这种情况？

【问题讨论】：

您只能使用Injector
感谢您回答 yurzui。你能告诉我一个基于这个例子的 Injector 的例子吗？
stackoverflow.com/questions/39038791/…

标签： angular typescript dependency-injection

【解决方案1】：

由于继承目前在 Angular 的可注入类中的工作方式，DI 注释是从 injectable 父类（具有Injectable、Component、Directive、...装饰）。

如果必须将新的依赖项添加到子 constructor，constructor 签名应该完全重复，它还将依赖项传递给带有 super(...) 的父构造函数（就像在原始代码中所做的那样）。否则constructor可以省略，继承父类。

这取决于子类中依赖集之间的差异有多大。如果它不重要，如果它有助于保持子类 DRY，则父类可以有一个或两个额外的依赖项：

@Injectable()
export class AbstractBlog {
  constructor(
    protected elementRef: ElementRef, // used only by BlogComponent 
    protected modalService: ModalService,
    protected router: Router,
    protected itemService: ItemService
 ) { }
}

export class BlogComponent extends AbstractBlog {
  // use services
}

export class Blog2Component extends AbstractBlog {
  // use services
}

【讨论】：