角度4扩展基础组件

Question

我有一个由其子节点扩展的基本组件,但是当我们使用angular-cli在Angular中创建一个新的Component时,它会创建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在子类中被省略并继承,则基类应该有@Injectabledecorator:

@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);
  }
*/
}