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 =＆＃34; showContent＆＃34;到组件元素（＆＃39; showContent＆＃39;需要作为托管组件的属性存在）。

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

<强>更新

您应用的根组件是在标记中定义为<my-app>的AppComponent。所有其他组件都需要嵌套在该级别的模板中。将标记从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 -->

使用angular2显示静态内容

1 个答案: