Angular 2组件指令不起作用

Question

I am a beginner in angular 2 and I want to make my first app working. 我是角度2的初学者，我想让我的第一个应用程序工作。 I am using TypeScript. 我正在使用TypeScript。 I have the app.component.ts in which I have made a directive to another compoent called todos.component but I am getting the following error at compile time: 我有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 的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.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! 提前致谢！

Answer 1

In your app.component.ts you define directive: [TodosComponent] . 在app.component.ts定义directive: [TodosComponent] 。 The directive property has been removed in RC6 from the @Component() decorator. 已在RC6中从@Component()装饰器中删除了指令属性。

The solution to this, is to: 对此的解决方案是：

create an NgModule and 创建一个NgModule和
declare the TodosComponent inside the declarations: [] array. 在declarations: []数组中declarations: [] TodosComponent。

See here for an example of AppModule: 有关AppModule的示例，请参见此处：

https://angular.io/docs/ts/latest/tutorial/toh-pt3.html https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

Answer 2

当angular2处于beta版本时，最初添加了module.id。由于新版本和angular cli支持，不需要添加moduleId：module.id ，你可以从.ts文件中删除

Angular 2组件指令不起作用

问题描述

2 个解决方案

解决方案1
51 已采纳 2016-09-23 10:29:11

解决方案2
3 2016-12-15 15:32:07

Angular 2组件指令不起作用

问题描述

2 个解决方案

解决方案1 51 已采纳 2016-09-23 10:29:11

解决方案2 3 2016-12-15 15:32:07

解决方案1
51 已采纳 2016-09-23 10:29:11

解决方案2
3 2016-12-15 15:32:07