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;
  }
}

Answer 1

我对angular和Typescript不熟悉，但是我认为主要的问题是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

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

1 个答案: