角4重构构造

Question

比方说，我有以下文件

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的构造函数中添加另一个服务，我将不得不更新一百个文件以匹配构造函数。
有没有更好的方法来处理这种情况？

Answer 1

由于继承当前的工作方式在角注入类，DI注释从注射父类（有Injectable，Component，Directive之一，...装饰）继承。

如果新的依赖必须被添加到孩子constructor，constructor签名应重复全部，它也传递依赖关系父类的构造与super(...)（就像它是在原来的代码完成）。否则constructor可以省略从父类继承。

这取决于子类中依赖集之间的区别有多大。如果不是显著，父类可以有额外的依赖或两个，如果它有助于保持子类干：

@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 
}