Angular 6 和 typescript 子类从父类扩展并消除子变量

Question

我有一个名为ParentService 的abstract class 及其child class ChildService 如下：

ParentService

import { Injectable } from '@angular/core';
import { MyModel} from './mymodel-model.service';
@Injectable({
  providedIn: 'root'
})
export abstract class ParentService {
  constructor() { }
  word:MyModel = { 
    "AA":"AA",
    "BB":"BB",
  }
}

ChildService

import { Injectable } from '@angular/core';
import { MyModel} from './mymodel-model.service';
import { ParentService } from './parent.service';
@Injectable({
  providedIn: 'root'
})
export class ChildService extends ParentService {
  word2:MyModel = {
    "AA":"AA2",
    "BB":"BB2",
  };
}

在app-component 的constructor 中我声明了子实例如下：

constructor(private child_instance:ChildService){}

在浏览器控制台中打印 child_instance 时，我得到：

 ParentService {word: {…}}

没有extends ParentService 我得到了：

 ChildService {word2: {…}}

但我需要将两个变量放在同一个类中：

ChildService {word: {…},word2: {…}}
//or
ParentService {word: {…},word2: {…}}

我怎样才能做到这一点？

Answer 1

在澄清@Satish Pai 之后，我创建了一个解决方法：

在ParentService 类中：

/* Some code here... */
export class ParentService {
  constructor() { }
  word:Lang = {
    "ES":"ESP",
    "EN":"ENG",
  }
/* Some code here... */
}

在ChildService 类中：

/* Some code here... */
export class ChildService{
  constructor(){
    var gParent:ParentService = new ParentService();
    var gkeys = Object.keys(gParent);
    for(var i = 0; i < gkeys.length; i++){
      this[gkeys[i]] = gParent[gkeys[i]];
    }
  }
  /* Some code here... */
}

警告：这会将整个ParentClass 复制到ChildClass 中（偶数函数）

建议：您可以在gkeys 上应用一些regex，以仅复制某些functions 或variables。

Answer 2

您需要在child.service 构造函数中调用super()。

export class ParentService {
  constructor() { }
  word = { 
    "AA":"AA",
    "BB":"BB",
  }
}

export class ChildService extends ParentService {
  word2 = {
    "AA":"AA2",
    "BB":"BB2",
  };

  constructor() {
    super();
    console.log(this); // prints ChildService {word: {…}, word2: {…}}
 }
}