angular - 如何定义具有相同父类型的对象数组？

Question

当 Toolage 对象显示其 ToolButtonComponent 类型的对象列表时，它们是未定义的。我在这里做错了什么？

  import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tool-button',
  templateUrl: './tool-button.component.html',
  styleUrls: ['./tool-button.component.css']
})
export class ToolButtonComponent implements OnInit {

  public constructor(theTile:string) {
  }


  ngOnInit() {
  }

}

export class FunButtonComponent extends ToolButtonComponent implements OnInit {



  ngOnInit() {
  }

}
export class CoolButtonComponent extends ToolButtonComponent implements OnInit {


  ngOnInit() {
  }
}

@Component({
  selector: 'app-toolage',
  template: `
  <h1>{{title}}</h1>
  <h2>Toolage</h2>
  <p>Tools:</p>
  <ul>
    <li *ngFor="let tool of tools">
      {{ tool.theTile }}
    </li>
  </ul>
`
})
export class Toolage {
  private tools: ToolButtonComponent[] = [ 
      new ToolButtonComponent("tool button"), 
      new FunButtonComponent('fun button'), 
      new CoolButtonComponent("fa-eraser")
    ];

  constructor() { }

  getTools() : ToolButtonComponent[] {
    return this.tools;
  }
}

标签： angulartypescriptcasting

Answer 1

我是角度和打字稿的新手，但我认为主要问题是构造函数的theTile参数ToolButtonComponent没有做任何事情。你想要做的是将它分配给一个属性，ToolButtonComponent如下所示：

export class ToolButtonComponent implements OnInit {

    public theTile:string;

    public constructor(theTile:string) {

        this.theTile = theTile;

    }// end constructor

}// end class

类将FunButtonComponent继承CoolButtonComponent此属性。现在您调用将参数从其构造函数super()解析到父构造函数，父构造函数将自动将其继承属性设置为该参数的值，如下所示：theTile

export class FunButtonComponent extends ToolButtonComponent {

    public constructor(theTile:string) {

        super(theTile);

    }// end constructor

}// end class


export class CoolButtonComponent extends ToolButtonComponent {

    public constructor(theTile:string) {

        super(theTile);

    }// end constructor

}// end class

这一切都应该是这样的：

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-root',
  template: `
    <app-toolage></app-toolage>
  `
})
export class AppComponent {}


@Component({
    selector: 'app-toolage',
    template : `
      <h1>{{title}}</h1>
      <h2>Toolage</h2>
      <p>Tools:</p>
      <ul>
        <li *ngFor="let tool of tools">
          {{ tool.theTile }}
        </li>
      </ul>
    `
})
export class Toolage {

    private tools:ToolButtonComponent[] = [ 
        new ToolButtonComponent("tool button"), 
        new FunButtonComponent('fun button'), 
        new CoolButtonComponent("fa-eraser")
    ];

    public getTools():ToolButtonComponent[] {

        return this.tools;

    }// end function

}// end class


@Component({
  selector: 'app-tool-button',
  template: `
    <button>{{ theTile }}</button>
  `
})
export class ToolButtonComponent implements OnInit {

    public theTile:string;

    public constructor(theTile:string) {

        this.theTile = theTile;

    }// end constructor

}// end class


export class FunButtonComponent extends ToolButtonComponent {

    public constructor(theTile:string) {

        super(theTile);

    }// end constructor

}// end class


export class CoolButtonComponent extends ToolButtonComponent {

    public constructor(theTile:string) {

        super(theTile);

    }// end constructor

}// end class