如何在Angular 2 RC6中使用自定义指令？

Question

我有麻烦，包括一个自定义组件（指令）到我的角度组件。

组件呈现，我也可以看到DOM（Chrome开发工具）中的指令。但它是空尽管我提供了一个模板。

home.module.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 
import { HomeComponent } from './index'; 
@NgModule({ 
    declarations: [ 
     HomeComponent 
    ], 
    exports: [ 
     HomeComponent 
    ], 
    schemas: [ 
     CUSTOM_ELEMENTS_SCHEMA 
    ] 
}) 
export class HomeModule { 
} 

预输入-custom.component.ts

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

@Component({ 
    selector: 'typeahead-custom', 
    template: `<div> 
    <span>component</span> 
<div style="padding-left: 5px"> 
    </div></div> 
    `, 
    styleUrls: [ 
     'app/includes/typeahead-custom/typeahead-custom.css' 
    ] 
}) 

export class TypeAheadCustomComponent { 

    constructor() { } 
} 

home.component.ts

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

@Component({ 
    selector: 'as-home', 
    templateUrl: 'app/home/home.html', 
    styleUrls: [ 
     'app/home/home.css' 
    ] 
}) 

export class HomeComponent { 
    public myData: any; 
    public mySource: any[] = [ 
     { key:1, name:'Key One' }, 
     { key:2, name:'Key Two' }, 
     { key:3, name:'Key Three' }, 
     { key:4, name:'Key Four' } 
    ]; 

    constructor() { } 
} 

DOM结果：

..... 
<as-home _nghost-btf-4=""><typeahead-custom _ngcontent-btf-4=""></typeahead-custom> 
</as-home> 
.... 

Answer 1

import {TypeAheadCustomComponent } from './typeahead-custom.component'; 

@NgModule({ 
    declarations: [ 
     HomeComponent,TypeAheadCustomComponent <///----here 
    ], 
    exports: [ 
     HomeComponent 
    ], 
    schemas: [ 
     CUSTOM_ELEMENTS_SCHEMA 
    ] 
})