首页 文章

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

提问于
浏览 次
1

我在我的角度组件中遇到包括自定义组件（指令）的麻烦 .

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

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

1 回答

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

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

相关问题