Angular 2 Block-scoped Variable Probleme

Ich verwende derzeit eine Angular 2-Demo mit TypeScript. Es gibt zwei Dateien: die index.html-Datei, die als Vorlage importiert wird, und die TypeScript-Datei. Die Typoskript Datei kompiliert zu einem pomodoro-timer.js und für diese Demo, alle Klassen sind in einer Datei enthalten:Angular 2 Block-scoped Variable Probleme

pomodoro-timer.ts

import { 
    Component, 
    Input, 
    Pipe, 
    PipeTransform, 
    Directive, 
    OnInit, 
    HostListener 
} from '@angular/core'; 
import { bootstrap } from '@angular/platform-browser-dynamic'; 

/// Model interface 
interface Task { 
    name: string; 
    deadline: Date; 
    queued: boolean; 
    pomodorosRequired: number; 
} 

/// Local Data Service 
class TaskService { 
    public taskStore: Array<Task> = []; 

constructor() { 
    const tasks = [ 
     { 
      name: "Code an HTML Table", 
      deadline: "Jun 23 2015", 
      pomodorosRequired: 1 
     }, 
     { 
      name: "Sketch a wireframe for the new homepage", 
      deadline: "Jun 24 2016", 
      pomodorosRequired: 2 
     }, 
     { 
      name: "Style table with Bootstrap styles", 
      deadline: "Jun 25 2016", 
      pomodorosRequired: 1 
     }, 
     { 
      name: "Reinforce SEO with custom sitemap.xml", 
      deadline: "Jun 26 2016", 
      pomodorosRequired: 3 
     } 
    ]; 

    this.taskStore = tasks.map(task => { 
     return { 
      name: task.name, 
      deadline: new Date(task.deadline), 
      queued: false, 
      pomodorosRequired: task.pomodorosRequired 
     }; 
    }); 
} 

/// Component classes 

/// - Main Parent Component 

@Component({ 
    selector: 'pomodoro-tasks', 
    styleUrls: ['pomodoro-tasks.css'], 
    templateUrl: 'pomodoro-tasks.html' 
}) 

class TasksComponent { 
    today: Date; 
    tasks: Task[]; 

    constructor() { 
     const TasksService: TasksService = new TasksService(); 
     this.tasks = taskService.taskStore; 
     this.today = new Date(); 
    } 
}; 

bootstrap(TasksComponent);

index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Hello Angular 2!</title> 
     <!-- required stylesheets --> 
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> 
     <!-- required javascripts --> 
     <script src="node_modules/es6-shim/es6-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.js"></script> 
     <script src="node_modules/rxjs/bundles/Rx.js"></script> 

     <script src="systemjs.config.js"></script> 
     <script> 
      // importation of component module 
      // with no file extension 
      System.import('built/pomodoro-tasks').then(null, console.error.bind(console)); 
     </script> 
    </head> 

    <body> 
     <nav class="navbar navbar-default navbar-static-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <strong class="navbar-brand">My Pomodoro Tasks</strong> 
       </div> 
      </div> 
     </nav> 
     <pomodoro-tasks></pomodoro-tasks> 
    </body> 
</html>

Alles scheint in Ordnung, aber zu arbeiten, dieser Teil der pomodoro-timer.ts Datei einen Fehler zu werfen scheint:

class TasksComponent { 
    today: Date; 
    tasks: Task[]; 

    constructor() { 
     // (Cannot find name 'TasksService'.at line 91 col 29, BELOW) 
     // (Block-scoped variable 'TasksService' used before its declaration.at line 91 col 48, BELOW) 
     const TasksService: TasksService = new TasksService(); 

     // (Cannot find name 'taskService'.at line 92 col 22, BELOW) 
     this.tasks = taskService.taskStore; 
     this.today = new Date(); 
    } 
}; 

bootstrap(TasksComponent);

Jeder mit Typoskript vertraut hat keine Ahnung, warum ich würde diese Fehler bekommen? Ich verwende Atom IDE mit dem TypeScript-Plugin. Erste

Quelle

2016-08-17 Mindsect Team

'TasksService! == TaskService' –

I habe das nicht bemerkt. Unsere neue Demo verwendete Namenskonventionen, die wir aus der Angular2-API-Dokumentation übernommen hatten. Vielen Dank! –

1) haben Sie einen Tippfehler taskService statt tasksService

2) Sie sollten nicht TasksService instanziiert, wie Sie hier getan haben.

`constructor() { 
    const TasksService: TasksService = new TasksService(); 
    this.tasks = taskService.taskStore; 
    this.today = new Date(); 
`}

Sie sollten vielmehr den Code dieses

constructor(private taskService:TasksService) { this.tasks = this.taskService.taskStore; this.today = new Date(); } ändern

Um mehr über Dependency Injection und Best Practices zu erfahren lesen Sie in diesem Link https://angular.io/docs/ts/latest/guide/dependency-injection.html

Quelle

2016-08-17 06:57:46

Danke. Obwohl ich das Parameterformat nicht ändern musste, um es zum Laufen zu bringen, scheint es, dass unsere Demo nicht die Hüllenregeln von Konstruktoren (wie Klassen) vs. Variablen einhält. Danke noch einmal! –

Angular 2 Block-scoped Variable Probleme

Antwort

Verwandte Themen