如何在 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 {
}

typeahead-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
    ]
})