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
。不确定这是否只是复制时的错字。
我知道这可能是一个愚蠢的错误,或者我期待的是错误的东西,但是我对我在这里遗漏的东西感到困惑。我是打字稿的新手,我正在尝试通过继承爵士乐来优化我的 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
。不确定这是否只是复制时的错字。