用angular2顯示靜態內容

Question

請原諒這個新手問題;我剛剛開始使用angular2。我已經通過了角色英雄演示，瞭解組件如何工作，如何將數據連接到HTML等。

但是如果我有一塊靜態html，我想有條件地顯示（即在某些頁面上而不是其他人）？我是否需要創建一個完整的組件，包含所有的導入和導出，即使沒有數據模型可以將它綁定到它？如果不是，我該如何去做這件事？在角1，我只是創造一個指令，並調用它，但angular2移動一切components.an

更新 創建了一個名爲WelcomeComponent（welcome.component.ts）組件和一個HTML文件（我們試圖保持所有的html在模板中分開，而不是與組件代碼混合。）我在app.component.ts中註冊了我的組件。

這裏的welcome.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 { } 

而且以下是我試圖在我的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。首先在項目中創建一個新文件夾來保存組件。然後創建組件，這將是這個樣子：

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

然後，您將需要在聲明節你app.module註冊該組件。現在，您可以選擇添加到需要顯示靜態內容的任何組件：

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

當你要有條件地顯示內容，您可以添加* ngIf =「showContent」的組成元素（「showContent」需要作爲託管組件上的一個屬性存在）。

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