Javascript Angular 2 组件指令不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39658186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 component directive not working
提问by candino
I am a beginner in angular 2 and I want to make my first app working. I am using TypeScript. I have the app.component.tsin which I have made a directive to another compoent called todos.componentbut I am getting the following error at compile time:
我是 angular 2 的初学者，我想让我的第一个应用程序运行。我正在使用打字稿。我有app.component.ts，其中我向另一个名为todos.component 的组件发出指令，但在编译时出现以下错误：
[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'.
My code is like this:
我的代码是这样的：
index.html
索引.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.component.ts
app.component.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:
app.component.html：
<h1> Angular 2 application</h1>
{{title}}
<app-todos></app-todos>
todos.component.ts
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:";
}
Without the directive, the app works fine. Any help would be appreciated!
没有指令，应用程序运行良好。任何帮助，将不胜感激！
Thanks in advance!
提前致谢！
回答by Alexander Ciesielski
In your app.component.tsyou define directive: [TodosComponent].
The directive property has been removed in RC6 from the @Component()decorator.
在您app.component.ts定义directive: [TodosComponent]. RC6 中的指令属性已从@Component()装饰器中删除。
The solution to this, is to:
解决这个问题的方法是：
- create an NgModule and
- declare the TodosComponent inside the
declarations: []array.
- 创建一个 NgModule 和
- 在
declarations: []数组中声明 TodosComponent 。
See here for an example of AppModule:
有关 AppModule 的示例，请参见此处：
回答by harshith hm
module.id was added in intially when angular2 was at beta version.Since with new version and angular cli support it is not required to add moduleId:module.id,you can remove from .ts files
module.id 是在 angular2 处于 beta 版本时最初添加的。由于有了新版本和 angular cli 支持，不需要添加moduleId:module.id，您可以从 .ts 文件中删除
