2016-09-17 15 views
1

私は、角度成分にカスタムコンポーネント(ディレクティブ)を含む問題を抱えています。Angular 2 RC6でカスタムディレクティブを使用するにはどうすればよいですか?

コンポーネントがレンダリングされ、DOM(Chrome Dev Tools)でディレクティブが表示されます。しかし、私はテンプレートを提供したにもかかわらず、が空のです。

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

答えて

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

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

はい、私は最後にそれを整理。それと同時に:)私はそれを私にさせるときに答えを受け入れるよ! – dragonmnl

+0

ああそれは素晴らしいです! Angular2を楽しみましょう。 – micronyks

+0

このデコレータはどのモジュールに属していますか? 'HomeModule'? –

関連する問題