Javascript NG2组件不显示？

因此，在我的angular 2应用程序中，我有：

//app.component.ts
import { Component } from '@angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';

@Component({
  selector: 'my-app',
  template: `<sidebar></sidebar>
  <h1>helps</h1>`,
  providers: [sidebarComponent]
})
export class AppComponent { }

//app.component.ts
从'@angular/core'导入{Component}；
从“./sidebar/sidebar.component”导入{sidebarComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`
帮助`，
提供者：[侧边栏组件]
})
导出类AppComponent{}

及

//sidebar.component.ts
从'@angular/core'导入{Component}；
@组成部分({
选择器：“侧栏”，
模板：`侧栏`
})
导出类sidebarComponent{}

---

当我加载我的应用程序并显示app.component时，我会直接获得

帮助

（在页面源代码中），但没有

侧栏

。我在这里遗漏了什么？

使用

指令：[sidebarComponent]

而不是

提供者：[sidebarComponent]
使用
指令：[sidebarComponent]
而不是
提供者：[sidebarComponent]
我在这里遗漏了什么？指令：-）

从'@angular/core'导入{Component}；
从“./sidebar/sidebar.component”导入{sidebarComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`
帮助`，
指令：[侧边栏组件]
})
导出类AppComponent{}
我错过了什么？指令：-）

从'@angular/core'导入{Component}；
从“./sidebar/sidebar.component”导入{sidebarComponent}；
@组成部分({
选择器：“我的应用程序”，
模板：`
帮助`，
指令：[侧边栏组件]
})
导出类AppComponent{}

//sidebar.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'sidebar',
  template: `<h1>sidebar</h1>`
})
export class sidebarComponent { }

import { Component } from '@angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';

@Component({
  selector: 'my-app',
  template: `<sidebar></sidebar>
  <h1>helps</h1>`,
  directives: [sidebarComponent]
})
export class AppComponent { }