Angular 2组件指令不起作用

我是角度2的初学者，我想让我的第一个应用程序工作。我正在使用TypeScript。我有app.component.ts中，我已经做了一个指令，称为todos.component但我在编译时得到以下错误另一compoent：Angular 2组件指令不起作用

[0] app/app.component.ts(7,3): error TS2345: Argument of type '{ moduleId: string; selector: string; directives: typeof TodosComponent[]; templateUrl: string; s ...' is not assignable to parameter of type 'Component'. 
[0] Object literal may only specify known properties, and 'directives' does not exist in type 'Component'.

我的代码是这样的：

的index.html

<html> 
    <head> 
    <title>Angular 2 QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <app-root>Loading...</app-root> 
    </body> 
</html>

app.componen t.ts

import { Component } from '@angular/core'; 
import {TodosComponent} from './todos/todos.component'; 

@Component({ 
    moduleId : module.id, 
    selector: 'app-root', 
    directives: [TodosComponent], 
    templateUrl : 'app.component.html', 
    styleUrls : ['app.component.css'] 
}) 

export class AppComponent { 
    title: string = "Does it work?"; 
}

app.component.html：

<h1> Angular 2 application</h1> 
{{title}} 
<app-todos></app-todos>

todos.component.ts

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    moduleId : module.id, 
    selector: 'app-todos', 
    template: '<h2>Todo List</h2>' 
}) 

export class TodosComponent { 
    title: string = "You have to do the following today:";  
}

没有指令，应用程序工作正常。任何帮助，将不胜感激！

在此先感谢！

来源

2016-09-23 candino

你不是以错误的方式创建一个指令吗？来自'@ angular/core'的Angular2文档'import {Directive，ElementRef，Input，Renderer}; @Directive（{selector：'[myHighlight]'}） export class HighlightDirective {elt：ElementRef，renderer：Renderer）{ renderer.setElementStyle（el.nativeElement，'backgroundColor'，'yellow'）; } } ' – Pradeepb

如果您使用的是最新的Angular final，'@ Component'元数据中不存在'directives'（因此错误）。如果你正在做一个教程，你应该尝试找到一个更新的教程。在短时间内发生了很多变化，很多教程已经过时。我个人只是去[Angular文档]（https://angular.io/docs/ts/latest/）并从那里开始。 –

同意@peeskillet，看看这个https://angular.io/docs/ts/latest/guide/attribute-directives.html。不要使用@Component的'directives：'，只将它添加到'app.module.ts'的'声明：'中。 – haxpor

在您的app.component.ts中，您定义了directive: [TodosComponent]。指令属性已从@Component()装饰器的RC6中删除。

解决这个，是：

创建NgModule和
声明declarations: []阵列内的TodosComponent。

在这里看到的AppModule的一个示例：在intially时angular2是于β-version.Since与新版本和角CLI加入

https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

来源

2016-09-23 10:29:11

谢谢！而已！ – candino

@Alexander如果我想为特定组件加载指令而不是整个应用程序，该怎么办？仅供参考 - 我正在尝试加载tinymce文本编辑器。 –

您应该从该单个组件中创建一个模块，并在那里声明组件和指令。 –

module.id它不需要支持添加moduleId：module.id，你可以从.ts文件中删除

来源

2016-12-15 15:32:07

Angular 2组件指令不起作用

回答

相关问题