angular2で静的コンテンツを表示

Question

初心者の質問をお許しください。私はangular2から始めています。私は角度の英雄のデモを通してそれを作って、コンポーネントがどのように動作するか、データをhtmlなどに接続する方法を理解しています。

しかし、条件付きで表示したい静的なHTML他にはありません）？それにフックするデータモデルがなくても、すべてのインポートとエクスポートを含む完全なコンポーネントを作成する必要がありますか？そうでない場合は、どうやってこれをやりますか？ 1の角度では、私はちょうどディレクティブを作成し、それを呼び出すが、

をcomponents.anためにすべてをangular2移動していると思います更新 WelcomeComponentと呼ばれるコンポーネント（welcome.component.ts）とhtmlファイルを作成した（我々コンポーネントコードを混ぜるのではなく、すべてのhtmlをテンプレートに分けて保存しようとしています）。私はapp.component.tsにコンポーネントを登録しました。

ここ

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'welcome', 
    templateUrl: './welcome.component.html' 
}) 

export class WelcomeComponent{} 

がwelcome.component.htmlです：

<!-- Main jumbotron for a primary marketing message or call to action --> 
<div class="jumbotron"> 
    <div class="container"> 
     <h1>Hello, world!</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tincidunt mi, sed porttitor justo. Donec in vehicula arcu. Sed lobortis massa in sodales feugiat. Morbi in metus tristique, volutpat nisl ut, blandit odio. Ut elit ipsum, euismod ut suscipit interdum, tristique in velit. Quisque vestibulum elementum aliquam.</p> 
     <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> 
    </div> 
</div> 

ここ

だapp.module.ts：

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppRoutingModule } from './app-routing.module'; 
// Imports for loading & configuring the in-memory web api 
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; 
import { InMemoryDataService } from './in-memory-data.service'; 
import { AppComponent }   from './app.component'; 
import { FavoritesComponent } from './favorites.component'; 
import { ItemsComponent }  from './items.component'; 
import { ItemDetailComponent } from './item-detail.component'; 
import {ItemSearchComponent} from './item-search.component'; 
import { ItemService }   from './item.service'; 
import {WelcomeComponent} from './welcome.component'; 
@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    InMemoryWebApiModule.forRoot(InMemoryDataService), 
    AppRoutingModule 
    ], 
    declarations: [ 
    AppComponent, 
    FavoritesComponent, 
    ItemDetailComponent, 
    ItemSearchComponent, 
    ItemsComponent, 
    WelcomeComponent 
    ], 
    providers: [ ItemService ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

そして

はここwelcome.component.tsの内容ですここで私のindex.htmlファイルでどのように呼び出そうとしているのですか：

<welcome></welcome> 

    <div class="container"> 
    <my-app></my-app> 
    <my-favorites></my-favorites> 
    <hr> 

    <footer> 
     <p>&copy; 2016 Company, Inc.</p> 
    </footer> 
    </div> <!-- /container --> 

my-favoritesコンポーネントはまったく同じ方法で定義され、そのコンポーネントの内容は正しく表示されます。私は何が欠けていますか？

Answer 1

コンポーネントを使用して静的HTMLを表示します。まず、プロジェクト内にコンポーネントを保持するための新しいフォルダを作成します。あなたはその後、宣言セクションで、あなたのapp.moduleでこのコンポーネントを登録する必要があります

import { Component } from '@angular/core' 
@Component(
    selector: 'my-content', /* this is the name that will be used in the markup */ 
    template: `<div>Some static content</div>` 
) 
export class MyContentComponent{} 

：次に、このようになりますコンポーネントを作成します。あなたは条件付きでコンテンツを表示したい場合、あなたは構成要素（「showContent」に* ngIf =「showContent」を追加することができます

<div> 
    <my-content></my-content> 
</div> 

：今、あなたは、静的なコンテンツを表示するために必要なすべてのコンポーネントにセレクタを追加することができますホスティングコンポーネント上にプロパティとして存在する必要があります）。

<div> 
    <my-content *ngIf="showContent"></my-content> 
</div> 

更新：

あなたのアプリケーションのルートコンポーネントがAppComponentが<my-app>としてマークアップで定義されています。追加のコンポーネントはすべて、そのレベルのテンプレートにネストする必要があります。マークアップをindex.htmlからapp.component.htmlに移動すると動作します。

Index.htmlと：

<my-app></my-app> 

app.component.html：

<welcome></welcome> 
    <div class="container"> 
    <!-- current contents of app.component.html --> 
    <my-favorites></my-favorites> 
    <hr> 

    <footer> 
     <p>&copy; 2016 Company, Inc.</p> 
    </footer> 
    </div> <!-- /container -->