Sub class 无法在打字稿中更改 super class 属性

Sub class unable to change super class property in typescript

我知道这可能是一个愚蠢的错误,或者我期待的是错误的东西,但是我对我在这里遗漏的东西感到困惑。我是打字稿的新手,我正在尝试通过继承爵士乐来优化我的 Angular 应用程序。

这就是我想要实现的目标。我有一个基础组件需要向其下拉框之一提供数据,但数据将由子组件提供(只有子组件知道列表值应该基于某些登录和其他条件)。所以这是我所做的和我认为可行的

export class BaseComponent implements OnInit
{
  public list!: string[]; // this is needed for a drop down in my html

  constructor(protected service: SomeService) { //injecting service for other tasks in super}

  ngOnInit(): void {
    //console.log(this.list) is always empty
  }

  public setList(list: string[]) {
    this.list = list;
  }
}

export class SubComponent extends BaseComponent implements OnInit
{
  constructor(
    service: SomeService,
  ) {
    super(service);
    super.setList(this.service.getDropDownList1());//only sub class which method to call, like xxxList1 or xxxList 2 etc

  }
}

但是在我的超级 ngOnInit 上,列表总是空的。我只是不明白为什么?鉴于我明确调用 super 以在 super 上设置 属性 为什么这不起作用?我一直在为我认为是一个基本问题而苦苦挣扎,但我看不出有任何解决办法。你能帮忙吗?

谢谢, 阿南斯

PS :在超级 class 构造中,如果我显式调用

this.service.getDropDownList1()

列表已填充并在 html 中显示正常。但是通过 sub class 没有运气:(

同时将 console.logs 放在构造函数和 onInits 中,我注意到基本构造函数被调用了两次,不知道为什么会这样 - 可能是由于我显式的 super 调用?????

编辑 1: 鉴于我来自纯粹的 Java 背景,让我看看我是否可以从那里用一个例子来解释我的问题!

 class Super {
  String superStr = "";

  public Super()
  {
    System.out.println(" in super constr" + this.superStr);

  }

  public void setString(String s)
  {
  this.superStr = s;
  }

  protected void printStr(){
    System.out.println("in printStr of super" + this.superStr);
  }
}

public class Sub extends Super{
  
  public Sub(){
  super.setString("I am sub setting super str");
  }

public static void main(String[] args){
  Sub s = new Sub();
  s.printStr();
}

}

在这种情况下,s.printStr 打印在调用 super 的 setString 方法时设置的值。这也是我期望在我的 TS 代码中发生的事情。在 constr 中,sub 设置 super 的列表,并且在 onOnit 被调用时,列表将用于显示下拉值。我比较错了吗?只是想确保我理解这一点。如果你能帮助我理解我的错误,我将不胜感激。

编辑 2: 我在下面接受 Chris 的回答 - 他的指导对我了解事情的运作方式最有帮助!

我将您的代码复制到 stackblitz 中,它似乎工作正常。

https://stackblitz.com/edit/angular-ivy-spjlo9?file=src/app/sub/sub.component.ts

您的 html 是否包含子组件的标签?换句话说,您确定显示的是子组件而不是基础组件吗?

虽然我确实看到这里有差异:

super.setList(this.service.getDropDownList1());

我需要删除 this 否则出现编译错误

super.setList(service.getDropDownList1());

或者,您可以像超级服务一样将服务标记为 protected。不确定这是否只是复制时的错字。