22
Tôi là người mới bắt đầu ở góc 2 và tôi muốn làm cho ứng dụng đầu tiên của mình hoạt động. Tôi đang sử dụng TypeScript. Tôi có app.component.ts trong đó tôi đã thực hiện một chỉ thị khác compoent gọi todos.component nhưng tôi nhận được lỗi sau tại thời gian biên dịch:Chỉ thị 2 thành phần góc không hoạt động
[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'.
Mã của tôi là như thế này :
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:";
}
Nếu không có chỉ thị, ứng dụng hoạt động tốt. Bất kỳ trợ giúp nào sẽ được đánh giá cao!
Cảm ơn trước!
Bạn không tạo chỉ thị sai hướng sao? từ Tài liệu Angular2 'nhập khẩu {Chỉ thị, ElementRef, Đầu vào, Trình kết xuất} từ 'góc/lõi của' @; @Directive ({selector: '[myHighlight]'}) lớp xuất bản HighlightDirective { hàm tạo (el: ElementRef, trình kết xuất: Trình kết xuất) { renderer.setElementStyle (el.nativeElement, 'backgroundColor', 'yellow'); } } ' – Pradeepb
Nếu bạn đang sử dụng phiên bản Final Angular mới nhất,' chỉ thị' không tồn tại trong siêu dữ liệu '@ Component' nữa (do đó là lỗi). Nếu bạn đang đi ra một hướng dẫn, bạn nên cố gắng tìm một hướng dẫn mới hơn. Đã có rất nhiều thay đổi trong một khoảng thời gian ngắn và rất nhiều hướng dẫn đã lỗi thời. Cá nhân tôi chỉ cần vào [Tài liệu góc] (https://angular.io/docs/ts/latest/) và bắt đầu từ đó. –
Đồng ý với @peeskillet, hãy xem https://angular.io/docs/ts/latest/guide/attribute-directives.html này. Chỉ cần không sử dụng 'chỉ thị:' của @Component, chỉ thêm nó vào 'khai báo' của 'app.module.ts'. – haxpor