3

現在、TypeScript を使用して Angular 2 のデモを実行しています。テンプレートとしてインポートされる index.html ファイルと TypeScript ファイルの 2 つのファイルがあります。TypeScript ファイルはpomodoro-timer.jsにコンパイルされます。このデモでは、すべてのクラスが 1 つのファイルに含まれています。

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>

すべて正常に動作しているように見えますが、 pomodoro-timer.tsファイルのこの部分でエラーが発生しているようです。

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);

TypeScript に精通している人なら、なぜこれらのエラーが発生するのか分かりますか? TypeScript プラグインで Atom IDE を使用しています。

4

2 に答える 2

7

このようにオブジェクトを初期化すると

const TasksService: TasksService = new TasksService();

以下のエラーが表示されます。

Blocked-scoped variable 'TasksService' used before its declaration.

この問題を解決するには、変数の名前を次のように変更します。

const TaskServ: TasksService = new TasksService();

注:このエラーは通常、class(Object) と同じ名前の変数を宣言したときに発生します。

于 2018-06-29T13:41:00.777 に答える
2

1）最初に、taskService代わりにタイプミスがありますtasksService

2) ここで行ったように TasksService をインスタンス化しないでください。

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

コードをこれに変更する必要があります

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

依存性注入とベスト プラクティスの詳細については、このリンクを確認してくださいhttps://angular.io/docs/ts/latest/guide/dependency-injection.html

于 2016-08-17T06:57:46.243 に答える