Экземпляр Angular 2 Компонент Два раза

Я пытаюсь изучить Angular 2, поэтому я делал несколько примеров hello world. Вот мой код:

boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'

bootstrap(AppComponent, [DataService]);

index.html

...
<body>
    <hello-world>Loading...</hello-world>
    <hello-world>Loading...</hello-world>
</body>
...

app.component.ts

import {Component} from 'angular2/core';
import {DataService} from './app.dataservice'

@Component({
    selector: 'hello-world',
    template: '<h1>Hello {{ item }}</h1>'
})

export class AppComponent {
    items: Array<number>;
    item: number;

    constructor(dataService: DataService) {
        this.items = dataService.getItems();
        this.item = this.items[0];
    }
}

app.dataservice.ts

export class DataService {
    items: Array<number>;

    constructor() {
        this.items = [1,2,3];
    }

    getItems() {
        return this.items;
    }
}

Код работает нормально, поскольку первый hello-world пользовательский тег корректно отображается с кодом внутри ts. Однако второй hello-world tag is not transformed. Отображается только один пользовательский элемент.

Не может быть более одного пользовательского тега? Как я могу это сделать?

ИЗМЕНИТЬ

Я добавил новый импорт внутри app.components.ts

import {ByeWorld} from './app.byeworld';

и app.byeworld.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'bye-world',
    template: '<h1>Bye World</h1>'
})

export class ByeWorld {
    constructor() {
    }
}

Ответ 1

Так же, как стандартная HTML-страница должна иметь один тег <body> для контента и один тег <head> для метаданных, приложение Angular2 должно иметь один корневой тег. Чтобы сделать работу с приложениями, вы должны ее инициализировать (сообщите Angular, что это приложение), и вы делаете это, вызывая функцию bootstrap().

Если вы беспокоитесь о том, что ваш корневой тег (например, <app>) находится внутри тела, вы можете изменить селектор из пользовательского тега app на стандартный тег body. Если вы добавляете другой компонент как root, например:

import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
import {AppComponent} from './app.component'
import {DataService} from './app.dataservice'

@Component({
  selector: 'body',
  directives: [AppComponent],
  template: `
    <hello-world>Loading...</hello-world>
    <hello-world>Loading...</hello-world>
  `
})
class RootComponent {}

bootstrap(RootComponent, [DataService]);

... остальная часть вашего кода должна работать.

Конечно, если в вашем HTML вам нужно иметь другие материалы (контент без приложения или другие приложения Angular), вы не выбрали бы body в качестве корневого селектора для вашего приложения Angular2.

Надеюсь, это поможет вам лучше понять ситуацию...

Ответ 2

Я проверил это. Вы не можете сделать более одного Angular 2 основных компонента с тем же именем. Но вы можете сделать столько, сколько хотите для не-основных компонентов.

Как различать основной и не основной компонент?

Основной компонент - тот, который загружается.

Посмотрите на снимок экрана.

Мой главный компонент: Что я сделал это дважды в HTML:

<body>
  <my-app>Loading...</my-app>
  <my-app>Loading...</my-app>
</body>

Как вы можете видеть, в конце нижней части рисунка находится loading.

Однако, он работает для не основных компонентов. Как вы можете видеть my-hero-detail, компоненты могут быть созданы как можно больше.

<div class="center-align">
<h1>{{title}}</h1>
</div>
<div class="row" style="margin-bottom: 0;">
    <div class="col s12 m6">
        <div id="my-heroes" class="card">
            <div class="card-header">
                <span>My Heroes</span>
            </div>
            <div class="card-content">
                <ul class="heroes">
                    <li *ngFor="#hero of heroes" 
                        (click)="onSelect(hero)"
                        [class.selected]="hero === selectedHero">
                        <span class="badge">{{hero.id}}</span> {{hero.name}}
                    </li>
                </ul>   
            </div>
        </div>      
    </div>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>
<div class="row">
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
    <my-hero-detail [hero]="selectedHero"></my-hero-detail>
</div>

My Hero Detail Component:

import {Component} from 'angular2/core';
import {Hero} from '../hero';
@Component({
    selector: 'my-hero-detail',
    templateUrl: 'app/hero-detail/hero-detail.html',
    inputs: ['hero'],
})

export class HeroDetailComponent {
    public hero: Hero;
}