Javascript 角2服务注入问题

我的项目结构：

import { Component } from "@angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";

@Component({
    moduleId: module.id,
    selector: "app",
    templateUrl: "app.component.html",
    styleUrls: ['app.component.css'],
    providers: [TodoService]
})
export class AppComponent {
    title:string = "Angular 2Do";
}

import {Component, Output, EventEmitter} from "@angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-form",
    templateUrl: "todo-form.component.html",
    styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
    ...
    constructor(private todoService:TodoService) {
        console.log(this.todoService);
        this.todoService.order = 2;
        console.log( this.todoService);
    }

}

import {Component, Input, OnInit} from "@angular/core"

import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-list",
    templateUrl: "todo-list.component.html",
    styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
    todos:ITodo[];

    ...

    constructor(private todoService:TodoService) {
        ...
        console.log(this.todoService);
        this.todoService.order=1;
        console.log(this.todoService);

    }
   ...

}

app.component.ts:

import { Component } from "@angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";

@Component({
    moduleId: module.id,
    selector: "app",
    templateUrl: "app.component.html",
    styleUrls: ['app.component.css'],
    providers: [TodoService]
})
export class AppComponent {
    title:string = "Angular 2Do";
}

import {Component, Output, EventEmitter} from "@angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-form",
    templateUrl: "todo-form.component.html",
    styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
    ...
    constructor(private todoService:TodoService) {
        console.log(this.todoService);
        this.todoService.order = 2;
        console.log( this.todoService);
    }

}

import {Component, Input, OnInit} from "@angular/core"

import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-list",
    templateUrl: "todo-list.component.html",
    styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
    todos:ITodo[];

    ...

    constructor(private todoService:TodoService) {
        ...
        console.log(this.todoService);
        this.todoService.order=1;
        console.log(this.todoService);

    }
   ...

}

todo form.component.ts:

import { Component } from "@angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";

@Component({
    moduleId: module.id,
    selector: "app",
    templateUrl: "app.component.html",
    styleUrls: ['app.component.css'],
    providers: [TodoService]
})
export class AppComponent {
    title:string = "Angular 2Do";
}

import {Component, Output, EventEmitter} from "@angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-form",
    templateUrl: "todo-form.component.html",
    styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
    ...
    constructor(private todoService:TodoService) {
        console.log(this.todoService);
        this.todoService.order = 2;
        console.log( this.todoService);
    }

}

import {Component, Input, OnInit} from "@angular/core"

import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-list",
    templateUrl: "todo-list.component.html",
    styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
    todos:ITodo[];

    ...

    constructor(private todoService:TodoService) {
        ...
        console.log(this.todoService);
        this.todoService.order=1;
        console.log(this.todoService);

    }
   ...

}

todo list.component.ts:

import { Component } from "@angular/core"
import { Todo } from './components/shared/todo.model'
import { todos } from "./components/shared/todo.data"
import {TodoService} from "./components/shared/todoService"
import {TodoService} from "./components/shared/todoService";

@Component({
    moduleId: module.id,
    selector: "app",
    templateUrl: "app.component.html",
    styleUrls: ['app.component.css'],
    providers: [TodoService]
})
export class AppComponent {
    title:string = "Angular 2Do";
}

import {Component, Output, EventEmitter} from "@angular/core";
import {Todo} from "../shared/todo.model";
import {TodoService} from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-form",
    templateUrl: "todo-form.component.html",
    styleUrls: ["todo-form.component.css"],
})
export class TodoForm {
    ...
    constructor(private todoService:TodoService) {
        console.log(this.todoService);
        this.todoService.order = 2;
        console.log( this.todoService);
    }

}

import {Component, Input, OnInit} from "@angular/core"

import { ITodo } from "../shared/todo.model"
import { TodoService } from "../shared/todoService"

@Component({
    moduleId: module.id,
    selector: "todo-list",
    templateUrl: "todo-list.component.html",
    styleUrls: ["todo-list.component.css"],
})
export class TodoListComponent implements OnInit {
    todos:ITodo[];

    ...

    constructor(private todoService:TodoService) {
        ...
        console.log(this.todoService);
        this.todoService.order=1;
        console.log(this.todoService);

    }
   ...

}

app

是

列表

和

表单

组件的父级

我在控制台中看到如何启动应用程序：

但如果把我所看到的全部展开：

这是实际的结果，为什么在第二个视图中我看到

1

，在另一个视图中看到

2

从不在组件中使用提供程序（

提供程序：[TodoService]

） 作为

---

当组件初始化时，它会生成新实例，因此只将

提供程序

放入模块，即

NgModule

console.log“+”按钮只能显示对象的当前状态，而不能显示调用时快照上的对象

有关更深入的解释，请参阅

所以顺序：1是对象的最终状态。

看看这个。您可以修改属性，然后console.log（）打印对该对象的引用，当您打开该对象时，该对象已更改。另见