22
Ich bin ein Anfänger in Winkel 2 und ich möchte meine erste App arbeiten lassen. Ich verwende TypeScript. Ich habe die app.component.ts, in dem ich eine Richtlinie auf einen anderen compoent todos.component genannt gemacht haben, aber ich bin den folgenden Fehler bei der Kompilierung bekommen:Angular 2-Komponenten-Richtlinie funktioniert nicht
[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'.
Mein Code wie folgt ist :
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:";
}
Ohne die Richtlinie, die App funktioniert gut. Jede Hilfe wäre willkommen!
Vielen Dank im Voraus!
Erstellen Sie nicht eine Richtlinie auf falsche Weise? aus der Angular2-Dokumentation 'import {Directive, ElementRef, Input, Renderer} aus '@ angular/core'; @Directive ({selector: '[myHighlight]'}) Exportklasse HighlightDirective { Konstruktor (el: ElementRef, Renderer: Renderer) { renderer.setElementStyle (el.nativeElement, 'backgroundColor', 'yellow'); } } ' – Pradeepb
Wenn Sie das neueste Angular-Final verwenden, existiert' Direktiven' nicht mehr in '@ Component'-Metadaten (daher der Fehler). Wenn Sie ein Tutorial ablegen, sollten Sie versuchen, ein neueres zu finden. Innerhalb kurzer Zeit gab es viele Änderungen und viele Tutorials sind veraltet. Ich würde persönlich zu [Angular Dokumentation] (https://angular.io/docs/ts/latest/) gehen und von dort aus starten. –
Stimmen Sie zu @peeskillet zu, werfen Sie einen Blick auf diese https://angular.io/docs/ts/latest/guide/attribute-directives.html. Verwenden Sie nicht 'directives:' von @Component, fügen Sie es nur in 'app.module.ts'' declarations: '. – haxpor