指令不能用作 Angular 2 中的入口组件

Question

我正在做一个带有注入的 Angular 2 演示，并得到一个错误，即我的 CustomDirective 不能用作入口元素。

所以，我的 NgModule

    import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import AppComponent from  './app.component';
import {NgModule} from "@angular/core";

@NgModule({
    declarations: [AppComponent],
    bootstrap:[AppComponent]
})
export class AppModule{}



const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

应用组件：

import {Component} from '@angular/core';
import {TIMER_DIRECTIVES} from './timer/timer';
import {TASK_DIRECTIVES} from './tasks/tasks';
import {SHARED_PROVIDERS} from './shared/shared';


@Component({
    selector: 'tomato-app',
    entryComponents: [TIMER_DIRECTIVES,TASK_DIRECTIVES],
    providers: [SHARED_PROVIDERS],
    template: `
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <strong class="navbar-brand">Tomato App</strong>
                </div>
            </div>
        </nav>
        <tomato-timer-widget></tomato-timer-widget>
        <tomato-tasks></tomato-tasks>`
})
export default class AppComponent{}

还有自定义指令本身：

import {Task} from '../shared/shared'
import {Input, HostListener, Directive} from '@angular/core';


@Directive({
    selector: '[task]'
})
export default class TaskTooltipDirective {
    private defaultTooltipText: string;
    @Input() task: Task;
    @Input() taskTooltip: any;

    @HostListener('mouseover')
    onMouseOver() {
        if (!this.defaultTooltipText && this.taskTooltip) {
            this.defaultTooltipText = this.taskTooltip.innerText;
        }
        this.taskTooltip.innerText = this.task.name;
    }

    @HostListener('mouseout')
    onMouseOut() {
        if (this.taskTooltip) {
            this.taskTooltip.innerText = this.defaultTooltipText;
        }
    }
}

问题是我在 AppComponent 中错误地使用了 entryComponents。我如何需要链接自定义指令？

Answer 1

entryComponents: 动态插入到该组件视图中的组件列表

How do I need to link a custom directive? 将所有指令、管道、组件放入 declarations 数组中的 NgModule 级别：

@NgModule({
    declarations: [AppComponent, TIMER_DIRECTIVES, TASK_DIRECTIVES],
    bootstrap:[AppComponent]
})
export class AppModule{}

请注意，如果您在 Component 级别声明 provider：

@Component({
    selector: 'tomato-app',
    providers: [SHARED_PROVIDERS],
    //...
})

它将为此组件的所有实例创建新实例。换句话说，如果你有 2 个不同的组件，其中 2 个声明 providers: [SHARED_PROVIDERS]，那么 2 个组件的 SHARED_PROVIDERS 是不同的。您需要在 NgModule 级别声明才能在此 NgModule 的所有组件中使用相同的实例。

@NgModule({
    declarations: [AppComponent, TIMER_DIRECTIVES, TASK_DIRECTIVES],
    providers: [SHARED_PROVIDERS],
    entryComponents: [TIMER_DIRECTIVES, TASK_DIRECTIVES],
    bootstrap:[AppComponent]
})
export class AppModule{}