angular2

Question

に1つのHTMLで3 HTMLSを指示するためにどのように私は3つの部門

私は3つの個々のテンプレートを作成したい

<div > 
div related to profile 
</div> 

<div > 
div related to settings 
</div> 

<div > 
div related to password change 
</div> 

を持っているHTML、

1）プロファイル 2）） 3を設定していますパスワードの変更

私は条件に応じて私のメインテンプレート内の各テンプレートを呼び出す、誰も私にこれを行うための助けを提案することができます。

Answer 1

いいえ、3つのコンポーネントを作成する必要があります。それらはテンプレートになり、メインテンプレートのディレクティブによって配置されます。

HTMLが必要な場合は、メインテンプレートの中にhtmlを置かないのはなぜですか？

//our root app component 
import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {ProfileComponent} from './profile.component' 
import {SettingsComponent} from './settings.component' 
import {PasswordChangeComponent} from './change-password.component' 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 

    <profile></profile> 
    <settings></settings> 
    <password></password> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = 'User' 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ProfileComponent, SettingsComponent, PasswordChangeComponent ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Check this plnkr