Angolare 2 Più di un componente sulla stessa pagina

Question

Sto lavorando dal codice di avvio rapido Angular 2 sul file app.component.ts.

Il file si presenta così:

import {Component} from 'angular2/core'; 

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

Questo funziona come previsto.

Quello che voglio fare è aggiungere un altro componente in questa stessa pagina ... così ho provato questo:

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

Questo non funziona ... E 'che sto facendo qualcosa di sbagliato o non è permesso?

Answer 1

Non è possibile avere due componenti radice con lo stesso selettore nella pagina, non è inoltre possibile avere due decoratori @Component() nella stessa classe.

Se i componenti hanno diversi selettori, basta eseguire bootstrap per ogni componente principale

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

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


bootstrap(AppComponent1) 
bootstrap(AppComponent2) 

C'è una questione aperta per sostenere l'override del selettore di essere in grado di aggiungere una radice componente più volte
- https://github.com/angular/angular/issues/915

Answer 2

Non è possibile avere un componente con decoratori a due componenti (@Component). È necessario creare due classi diverse per questo:

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

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

quindi è possibile utilizzare l'approccio dalla risposta del Gunter ...

Answer 3

Incase questo è utile a chiunque, potrebbe fare la stessa cosa con gli iFrame. Realizzato un esempio che si può vedere qui: http://plnkr.co/edit/xWKGS6

Fondamentalmente ho utilizzare iframe per caricare un widget HTML

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

Il widget è una normale pagina html angular2