web-dev-qa-db-fra.com

Angular directive angulaire à 2 composants ne fonctionne pas)

Je suis un débutant en angular 2 et je veux que ma première application fonctionne. J'utilise TypeScript. J'ai le app.component.ts dans lequel j'ai fait une directive à un autre composant appelé todos.component mais je reçois l'erreur suivante au moment de la compilation:

[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'.

Mon code est comme ça:

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:";    
}

Sans la directive, l'application fonctionne bien. Toute aide serait appréciée!

Merci d'avance!

javascriptangulartypescript
25
candino

Dans votre app.component.ts, Vous définissez directive: [TodosComponent]. La propriété directive a été supprimée dans RC6 du décorateur @Component().

La solution à cela est de:

  1. créer un NgModule et
  2. déclarer le composant TodosComponent dans le tableau declarations: [].

Voir ici pour un exemple de AppModule:

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

51
Alexander Ciesielski

module.id a été ajouté initialement lorsque angular2 était à la version bêta. Depuis la nouvelle version et angular support cli, il n'est pas nécessaire d'ajouter moduleId: module.id, vous pouvez supprimer des fichiers .ts

3
harshith hm