Вопросы по использованию импортированного компонента

Question

Я новичок в работе с угловыми js 2. Просматривали учебники и пробовали вещи, но застряли в одной проблеме ниже. Кто-нибудь знает об этом?

Ниже мой код

app.component.ts

import {Component} from 'angular2/core'; 
import {Items} from './test_items'; 

@Component({ 
    selector: 'my-app', 
    template:`   
     <div class="content-wrapper"> 
      <div class="content"> 
       <ul> 
        <li *ngFor="#hero of heroes"> 
         <span>{{hero.id}}</span> {{hero.name}} 
        </li> 
       </ul> 
      </div> 
     </div> 
    ` 
}) 

export class AppComponent { 
    public title = 'Test'; 
} 

test_items.ts

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

var HEROES: Hero[] = [ 
    { "id": 11, "name": "Mr. Nice" }, 
    { "id": 12, "name": "Narco" }, 
    { "id": 13, "name": "Bombasto" }, 
    { "id": 14, "name": "Celeritas" }, 
    { "id": 15, "name": "Magneta" }, 
    { "id": 16, "name": "RubberMan" }, 
    { "id": 17, "name": "Dynama" }, 
    { "id": 18, "name": "Dr IQ" }, 
    { "id": 19, "name": "Magma" }, 
    { "id": 20, "name": "Tornado" } 
]; 

export class Items { 
    public heroes = HEROES; 
} 

Список героев не получает отображаться так, как ожидалось. Есть ли ограничение на получение списка из другого компонента?

Answer 1

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {Items,Hero} from './comp'; 

@Component({ 
    selector: 'app', 
    template:`   
     <div class="content-wrapper"> 
      <div class="content"> 
       <ul> 
        <li *ngFor="#hero of heroes"> 
         <span>{{hero.id}}</span> {{hero.name}} 
        </li> 
       </ul> 
      </div> 
     </div> 
    ` 
}) 

export class AppComponent { 
    public title = 'Test'; 
    heroes:Hero[]; 

    constructor(items:Items) 
    { 
    this.heroes = items.heroes; 
    } 
} 

bootstrap(AppComponent, [Items]); 

Это может вам помочь.

Answer 2

Вид компонента итерации над аэратором heroes компонента. Но такого массива вообще нет. Единственное, что имеет этот компонент, - это заголовок.

Дело в том, что совершенно не связанный класс Items имеет поля с именем heroes, не имеет значения. Точно так же вы импортировали Items в компонент.

Импорт не означает, что все поля Items становятся полями AppComponent. Это просто означает, что компилятор и среда выполнения знают, где искать класс Items при компиляции/выполнении кода. Но так как AppComponent не использует класс Items, импорт бесполезен.