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