Pesquisa de site

typescript - Angular 4 estender componente base


Eu tenho um Componente Base estendido por seus filhos, mas quando criamos um novo Componente no Angular usando o angular-cli ele cria arquivos html e css, mas eu não vou usar esses arquivos do componente base.

Existe uma maneira de criar um Componente Base sem HTML e 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() {
  }

}

Resposta #1

Como a classe base não precisa ser instanciada por si só, ela é uma classe abstrata e não precisa ter o decorador @Component.

Se tiver dependências, e houver a chance de que constructor seja omitido em classes filhas e herdado, a classe base deve ter o decorador @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);
  }
*/
}

Artigos relacionados