Estoy haciendo una demostración de Angular 2 con inyección y aparece un error de que mi CustomDirective no se puede usar como elemento de entrada.
Entonces, mi 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);Componente de la aplicación:
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{}Y la directiva personalizada en sí:
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; } } }El problema es que estoy usando entryComponents en AppComponent incorrectamente. ¿Cómo necesito vincular una directiva personalizada?
entryComponents : lista de componentes que se insertan dinámicamente en la vista de este componente
How do I need to link a custom directive? Ponga toda su directiva, tubería, componente en la matriz de declarations en el nivel de NgModule :
@NgModule({ declarations: [AppComponent, TIMER_DIRECTIVES, TASK_DIRECTIVES], bootstrap:[AppComponent] }) export class AppModule{} tenga en cuenta que, si declara provider a nivel de Component :
@Component({ selector: 'tomato-app', providers: [SHARED_PROVIDERS], //... }) creará una nueva instancia para todas las instancias de este componente. en otras palabras, si tiene 2 componentes diferentes, con 2 providers: [SHARED_PROVIDERS] , entonces los SHARED_PROVIDERS de 2 componentes son diferentes. necesita declarar en el nivel de NgModule para usar la misma instancia en todos los componentes de este NgModule.
@NgModule({ declarations: [AppComponent, TIMER_DIRECTIVES, TASK_DIRECTIVES], providers: [SHARED_PROVIDERS], entryComponents: [TIMER_DIRECTIVES, TASK_DIRECTIVES], bootstrap:[AppComponent] }) export class AppModule{}