지시문을 각도 2의 입력 구성 요소로 사용할 수 없습니다.

Question

주입과 함께 각도 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); 

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

그리고 사용자 정의 지시어 자체 : 내가 잘못 AppComponent에 entryComponents을 사용하고 있음을

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

문제입니다. 사용자 지정 지시문을 연결하려면 어떻게해야합니까?

Answer 1

entryComponents : 동적

How do I need to link a custom directive? 가 NgModule 수준에서 declarations 배열에 모든 지시, 파이프, 컴퍼넌트를이 구성 요소의 뷰에 삽입되는 구성 요소의 목록 :

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

하는 것으로, provider을 신고하면 Component 수준 :

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