22
私は第2アンケートの初心者です。私は最初のアプリケーションを動作させたいと思っています。私はTypeScriptを使用しています。 は私がtodos.componentが、私はコンパイル時に次のエラーを取得していますと呼ばれる別のcompoentに指示をしている中でapp.component.tsを持っている：私のコードは次のようである角度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:";
}
、アプリが正常に動作します。 ご協力いただければ幸いです！
ありがとうございます！
間違った方法でディレクティブを作成していませんか？ Angular2のドキュメント 'import @ {directive、ElementRef、Input、Renderer}から '@ angular/core'; @Directive（{セレクタ： '[myHighlight]'}） エクスポートクラスHighlightDirective { コンストラクタ（EL：ElementRef、レンダラ：レンダラ）{ renderer.setElementStyle（el.nativeElement、 'のbackgroundColor'、 '黄色'）。 } } ' – Pradeepb
最新のAngularファイナルを使用している場合は、' @ Component'メタデータに 'directives'がもう存在しません（エラーです）。チュートリアルを終了する場合は、新しいチュートリアルを見つけようとする必要があります。短期間で多くの変更があり、多くのチュートリアルは時代遅れです。私は個人的に[Angular documentation]（https://angular.io/docs/ts/latest/）に行き、そこから始めます。 –
@peeskilletに同意する場合は、https://angular.io/docs/ts/latest/guide/attribute-directives.htmlをご覧ください。 @Componentの 'directives：'を使わないで 'app.module.ts'の' declarations： 'にのみ追加してください。 – haxpor