javascript - Directive cannot be used as an entry component in Angular 2 - Stack Overflow

admin管理员组

文章数量:1290964

I am doing an Angular 2 demo with injection and get an error that my CustomDirective can't be used as an entry element.

So, my NgModule

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

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



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

AppComponent:

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{}

And the custom directive itself:

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;
        }
    }
}

The problem is that I am using entryComponents in AppComponent incorrectly. How do I need to link a custom directive?

I am doing an Angular 2 demo with injection and get an error that my CustomDirective can't be used as an entry element.

So, my NgModule

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

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



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

AppComponent:

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{}

And the custom directive itself:

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;
        }
    }
}

The problem is that I am using entryComponents in AppComponent incorrectly. How do I need to link a custom directive?

• javascript
• angularjs
• angular
• typescript

Share Improve this question Follow edited Mar 27, 2017 at 1:59 fghf asked Mar 27, 2017 at 1:03 fghffghf 73444 gold badges1919 silver badges3838 bronze badges 3

• In the root NgModule, try adding entryComponents: [AppComponent]. The docs say it's unnecessary to add AppComponent to entryComponents but it doesn't hurt your code just extra redundancy – Justice O. Commented Mar 31, 2017 at 1:39
• 1 Is this issue solved? – eko Commented Apr 3, 2017 at 5:15
• Unfortunately nope – fghf Commented Apr 4, 2017 at 23:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

entryComponents: list of ponents that are dynamically inserted into the view of this ponent

How do I need to link a custom directive? Put your all directive, pipe, ponent in declarations array at NgModule level:

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

note that, if you declare provider at Component level:

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

it will create new instance for all instances of this ponent. in other word, if you have 2 different Component, with 2 declare providers: [SHARED_PROVIDERS], then the SHARED_PROVIDERS of 2 ponent are different. you need declare in NgModule level to use same instance in all ponent of this NgModule.

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

本文标签： javascriptDirective cannot be used as an entry component in Angular 2Stack Overflow