angular4 typescript 类, 创建实例的3种方法，英雄教程

Question

我正在使用 angular 练习打字稿，我需要了解如何使用 3 种不同的方法来创建实例。我像示例 angular 英雄教程一样创建了第一个实例：hero1，但我不明白 hero2 和 hero3 是否有效。我正在尝试在模板上打印 3 个英雄的名字。

代码：

app.component.js

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
hero: Hero = {
  id: 1,
  name: 'Flash'
}
@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1><h2>Hero1: {{hero.name}} , Hero2:  {{hero2.name}} , Hero3: {{hero3.name}}</h2>`,
})
export class AppComponent    {
  public hero2: Hero;
  public hero3;

  title = 'Tour of Heros';
  ngOnInit() {
    this.hero2  =  {
      id: 2,
      name: 'Superman'
    };
    this.hero3  = new (3, 'Spiderman') ;
  }
}

这里的代码使用 3 种方法解决（感谢答案）：

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1><h2>Hero1: {{hero.name}} , Hero2:  {{hero2.name}} , Hero3: {{hero3.name}}</h2>`,
})
export class AppComponent    {
  hero: Hero = {
    id: 1,
    name: 'Flash'
  }
  title = 'Tour of Heros';
  public hero2: Hero;
  public hero3: Hero;


  ngOnInit() {
    this.hero2  =  {
      id: 2,
      name: 'Superman'
    };
    this.hero3  = new Hero (3, 'Spiderman') ;
  }
}

Answer 1

你想要的是这样的：

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

export class Hero {
  id: number;
  name: string;

  // This allows you to make the call `new Hero(1, 'Flash')` for example
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

// Your Hero class could also look like this because TypeScript is awesome
// export class Hero {
//   constructor(public id: number, public name: string) { }
// }

@Component({
  selector: 'my-app',
  template: `
<h1>{{title}}</h1>
<h2>
  <!-- if you want all of the heroes to appear in 
  the same <h2>...</h2> tag as you had it, this is
  one way you can do it.  `ng-template` ends up not
  appearing in the DOM -->
  <ng-template *ngFor="let hero of heroes">Hero{{hero.id}}: {{hero.name}}</ng-template>
</h2>

<!-- I'd suggest changing your template to something like this: -->
  <h1>{{title}}</h1>
  <h2 *ngFor="let hero of heroes">{{hero.id}}: {{hero.name}}</h2>
<!-- ... so that each hero gets its own <h2>...</h2> tag -->
`
})
export class AppComponent implements OnInit {
  heroes: Hero[]; // A bucket-o-heroes (array, rather) that can grow and shrink in size as you see fit.
  title = 'Tour of Heros';

  // This gets called when the component is initialized
  ngOnInit() {
    // This populates the public property of the AppComponent that is an array of Heroes
    this.heroes = [
      new Hero(1, 'Flash'),
      new Hero(2, 'Superman'),
      new Hero(3, 'Spiderman')
    ]
  }
}

您需要使用一个数组，这样当您的应用在某人的浏览器中运行时，您可能希望他们能够实时添加更多英雄，因此可能有一种方法可以将他们创建的英雄附加到数组中。您的代码方式不允许添加更多英雄，因为其中三个英雄是通过组件的各个 public 属性引用的。

如果你想在传入 id 和 name 时创建新的 Hero class，你还需要一个构造函数。

希望对您有所帮助！玩得开心Angular！

Answer 2

您需要创建一个 Hero 对象数组，例如

this.heroes = [
      new Hero(1, 'XXX'),
      new Hero(2, 'YYY'),
      new Hero(3, 'ZZZ')
    ];

如果您使用这种方法，您的英雄组件中必须有一个构造函数 class 来初始化对象。

在使用 ngFor i:e 结构指令之后，您可以在模板中打印结果。

喜欢

<div *ngFor =  "let hero of heroes">
    {{hero.id}} -- {{hero.name}}
</div>

或者下一个方法将像普通对象数组一样使用。

this.heroes = [
{name: 'XXXX',id : '1'},
{name: 'YYY',id : '2'}
];

请查看此 link 以获得更多 angular 概念

https://rahulrsingh09.github.io/AngularConcepts

angular4 typescript 类, 创建实例的3种方法，英雄教程

angular4 typescript classes, 3 methods to create an instance, tutorial hero

typescript2.0

angular