javascript - otro - pasar parametros entre componentes angular 4
La directiva angular de 2 componentes no funciona (2)
Soy un principiante en angular 2 y quiero hacer que mi primera aplicación funcione. Estoy usando TypeScript. Tengo el app.component.ts en el que he hecho una directiva para otro componente llamado todos.component pero recibo 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 así:
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
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:";
}
Sin la directiva, la aplicación funciona bien. ¡Cualquier ayuda sería apreciada!
¡Gracias por adelantado!
En su app.component.ts usted define la 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 de la matriz de
declarations: [].
Vea aquí un ejemplo de AppModule:
module.id se agregó inicialmente cuando angular2 estaba en la versión beta. Puesto que con la nueva versión y la compatibilidad angular cli no es necesario agregar moduleId: module.id , puede eliminar archivos .ts