Angular 2 Более одного компонента на одной странице

Я работаю с быстрым стартовым кодом Angular 2 в файле app.component.ts.

Файл выглядит следующим образом:

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>'
})
export class AppComponent { }

Это работает как ожидалось.

Что я хочу сделать, так это добавить еще один компонент на эту же страницу... поэтому я пробовал это:

import {Component} from 'angular2/core';
import {ComponentTwo} from 'angular2/core';

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>'
}),

@Component({
    selector: 'appTwo',
    template: `<h1>Another Title Here</h1>'
})
export class AppComponent { }

Это не работает... Я что-то делаю неправильно или это не разрешено?

Ответ 1

У вас не может быть двух корневых компонентов с одним и тем же селектором на вашей странице, вы также не можете иметь двух декораторов @Component() в одном классе.

Если у ваших компонентов есть разные селекторы, просто запустите bootstrap для каждого корневого компонента

@Component({
    selector: 'app',
    template: '<h1>AppComponent1</h1>'
})
export class AppComponent1 { }

@Component({
    selector: 'appTwo',
    template: '<h1>AppComponent2</h1>'
})
export class AppComponent2 { }


bootstrap(AppComponent1)
bootstrap(AppComponent2)

Существует открытая проблема для поддержки переопределения селектора, чтобы иметь возможность добавлять корневой компонент несколько раз
- https://github.com/angular/angular/issues/915

Ответ 2

У вас не может быть компонент с двумя компонентами-декораторами (@Component). Для этого вам нужно создать два разных класса:

@Component({
    selector: 'app',
    template: `<h1>Title Here</h1>`
})
export class AppComponent { }

@Component({
    selector: 'appTwo',
    template: `<h1>Another Title Here</h1>`
})
export class AppComponent1 { }

Затем вы можете использовать подход из ответа Гюнтера...

Ответ 3

Если это полезно для всех, можно сделать то же самое с iFrames. Сделанный образец вы можете увидеть здесь: http://plnkr.co/edit/xWKGS6

В основном я использую iframes для загрузки виджета html

<iframe src="widget.html" width="500" height="400" style="border:none; background-color:#ccc">
  </iframe>

Виджет - это обычная страница angular2 html