Directiva angular de 2 componentes no funciona
Soy un principiante en angular 2 y quiero hacer que mi primera aplicación funcione. Estoy usando TypeScript. Tengo la aplicación .componente.ts en la que he hecho una directiva a otro compoent llamado todos.component pero estoy obteniendo el siguiente error en tiempo de compilación:
[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'.
Mi código es como esto:
Índice.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.componente.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.componente.html:
<h1> Angular 2 application</h1>
{{title}}
<app-todos></app-todos>
Todos.componente.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:";
}
Sin la directiva, la aplicación funciona bien. Cualquier ayuda sería apreciada!
Gracias de antemano!
2 answers
En tu app.component.ts
defines directive: [TodosComponent]
.
La propiedad directiva ha sido eliminada en RC6 del decorador @Component()
.
La solución a esto, es:
- crea un NgModule y
- declare el TodosComponent dentro del array
declarations: []
.
Vea aquí un ejemplo de AppModule:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-12 11:26:16
Module.id fue añadido intially cuando angular2 estaba en la versión beta.Dado que con la nueva versión y el soporte de angular cli no es necesario agregar moduleId:module.id , puede eliminar de .ts files
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-15 15:42:50