Angular 2 Więcej niż jeden składnik na tej samej stronie

Question

Pracuję z kodu szybkiego startu Angular 2 w pliku app.component.ts.

Plik wygląda następująco:

import {Component} from 'angular2/core'; 

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

to działa zgodnie z oczekiwaniami.

Co chcę zrobić jest dodanie kolejnego elementu na tej samej stronie ... więc próbowałem to:

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

to nie działa ... Czy to, że robię coś złego czy to nie jest dozwolone?

Answer 1

Nie możesz mieć dwóch składników root z tym samym selektorem na swojej stronie, nie możesz też mieć dwóch dekoratorów @Component() na tej samej klasie.

Jeśli komponenty mają różne selektorów, wystarczy uruchomić bootstrap dla każdego składnika głównego

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

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


bootstrap(AppComponent1) 
bootstrap(AppComponent2) 

Jest kwestią otwartą wspierać nadrzędny przełącznik, aby móc dodać korzeń składnik wielokrotnie
- https://github.com/angular/angular/issues/915

Answer 2

Nie możesz mieć komponentu z dekoratorami dwu komponentowymi (@Component). Musisz utworzyć dwie różne klasy do tego:

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

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

Następnie można użyć podejścia z odpowiedzią Guntera ...

Answer 3

Incase jest to pomocne dla każdego, może zrobić to samo z iframe. Wykonane próbki można zobaczyć tutaj: http://plnkr.co/edit/xWKGS6

Zasadniczo używam iframe załadować html widget

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

widget jest normalna strona angular2 html