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組件指令不起作用

回答

相關問題