Angular 4 扩展基础组件

Question

我有一个由其子组件扩展的基础组件，但是当我们使用 angular-cli 在 Angular 中创建一个新组件时，它会创建 html 和 css 文件，但我不会使用基础组件中的这些文件。

有没有办法在没有 html 和 css 的情况下创建基础组件？

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-base',
  templateUrl: './base.component.html', //I dont need this
  styleUrls: ['./base.component.css'] ////I dont need this
})
export class BaseComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}


import { Component } from '@angular/core';

import { BaseComponent } from '../base/base.component';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent extends BaseComponent {

  constructor() {
    super();
  }

  ngOnInit() {
  }

}

Answer 1

由于基类不需要自己实例化，它是抽象类，不需要@Component装饰器。

如果有依赖，子类有可能省略constructor而被继承，基类应该有@Injectable装饰器:

@Injectable()
export abstract class BaseComponent implements OnInit {
  constructor(public dep: Dep) {}

  ngOnInit() {}
}

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent extends BaseComponent {
  // dummy constructor can be omitted
/*
  constructor(dep: Dep) {
    super(dep);
  }
*/
}