Javascript 指令不能用作 Angular 2 中的入口组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43036414/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Directive cannot be used as an entry component in Angular 2
提问by Alex Bondar
I am doing an Angular 2 demo with injection and get an error that my CustomDirective can't be used as an entry element.
我正在做一个带有注入的 Angular 2 演示，并收到一个错误，指出我的 CustomDirective 不能用作入口元素。
So, my NgModule
所以，我的 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{}
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?
问题是我在 AppComponent 中错误地使用了 entryComponents。我如何需要链接自定义指令？
回答by Tiep Phan
entryComponents: list of components that are dynamically inserted into the view of this component
entryComponents: 动态插入到该组件视图中的组件列表
How do I need to link a custom directive?Put your all directive, pipe, component in declarationsarray at NgModulelevel:
How do I need to link a custom directive?将您的所有指令、管道、组件放在级别的declarations数组中NgModule：
@NgModule({
declarations: [AppComponent, TIMER_DIRECTIVES, TASK_DIRECTIVES],
bootstrap:[AppComponent]
})
export class AppModule{}
note that, if you declare providerat Componentlevel:
请注意，如果您provider在Component级别声明：
@Component({
selector: 'tomato-app',
providers: [SHARED_PROVIDERS],
//...
})
it will create new instance for all instances of this component. in other word, if you have 2 different Component, with 2 declare providers: [SHARED_PROVIDERS], then the SHARED_PROVIDERSof 2 component are different. you need declare in NgModule level to use same instance in all component of this NgModule.
它将为该组件的所有实例创建新实例。换句话说，如果你有 2 个不同的组件，有 2 个声明providers: [SHARED_PROVIDERS]，那么SHARED_PROVIDERS2 个组件的不同。您需要在 NgModule 级别声明以在此 NgModule 的所有组件中使用相同的实例。
@NgModule({
declarations: [AppComponent, TIMER_DIRECTIVES, TASK_DIRECTIVES],
providers: [SHARED_PROVIDERS],
entryComponents: [TIMER_DIRECTIVES, TASK_DIRECTIVES],
bootstrap:[AppComponent]
})
export class AppModule{}
