Richtlinie kann nicht als Eingangskomponente in Angular verwendet werden 2

Question

Ich mache eine Angular 2-Demo mit Injektion und bekomme einen Fehler, dass meine CustomDirective nicht als Eingabeelement verwendet werden kann.

Also, mein 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); 

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

und die benutzerdefinierte Richtlinie selbst:

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

Das Problem ist, dass ich entryComponents in AppComponent falsch verwenden. Wie muss ich eine benutzerdefinierte Anweisung verknüpfen?

Answer 1

entryComponents: Liste der Komponenten, die

How do I need to link a custom directive? Ihr alle Richtlinie, Rohr Setzen Sie in die Ansicht dieser Komponente dynamisch eingefügt werden, die Komponente in declarations Array auf NgModule Ebene:

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

beachten Sie, dass, wenn Sie provider unter Component melden:

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

wird eine neue Instanz für alle Instanzen dieser Komponente erstellt. mit anderen Worten, wenn Sie 2 verschiedene Komponenten haben, mit 2 deklarieren providers: [SHARED_PROVIDERS], dann sind die SHARED_PROVIDERS von 2 Komponenten unterschiedlich. Sie müssen deklarieren auf NgModule-Ebene, um dieselbe Instanz in allen Komponenten dieses NgModules zu verwenden.