角2同じページに複数のコンポーネントがあります

Question

私はapp.component.tsファイルのAngular 2クイックスタートコードから作業しています。予想通り

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

これは動作しません...それはです：

は、私は何をしたいので、私はこれを試してみました...この同じページに別のコンポーネントを追加することですまたはこれは許可されていませんか？

Answer 1

あなたのページに同じセレクタを持つルートコンポーネントを2つ持つことはできません。同じクラスに2つの@Component()デコレータを持つこともできません。

あなたのコンポーネントが異なるセレクタを持っている場合は、単に各ルートコンポーネントのためのブートストラップ実行コンポーネントを複数回
ルートを追加できるようにセレクタをオーバーライドサポートするための未解決の問題があり

@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

は、

Answer 2

2つのコンポーネントデコレータ（@Component）を持つコンポーネントは使用できません。あなたはこのために2つの異なるクラスを作成する必要があります。

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

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

その後、あなたはギュンターの答えからのアプローチを使用することができます...

Answer 3

のiFrameで同じことを行うことができ包みなさい、これは、誰にも便利です。あなたがここに見ることができるのサンプルを作った： http://plnkr.co/edit/xWKGS6

基本的に私は

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

にウィジェットをウィジェットのHTMLをロードするためのiframeを使用してhttps://github.com/angular