[英]Directive cannot be used as an entry component in Angular 2
我正在做一個帶有注入的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);
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{}
和自定義指令本身:
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。 我該如何鏈接自定義指令?
entryComponents
:動態插入到此組件視圖中的組件列表
How do I need to link a custom directive?
將所有指令,管道,組件放入NgModule
級別的declarations
數組中:
@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{}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.