角2服务注入问题

Question

我的项目结构：

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

待办事项，form.component.ts：

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

} 

待办事项，list.component.ts：

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是list和form组件的父

Whaen我开始申请我看到控制台：

但如果展开全部我看到：

这导致实际的和为什么在第二视图我看到1而在另一个2。

Answer 1

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

请参阅console.log() async or sync?以获得更深入的解释。

所以order：1，是对象的最终状态。

Answer 2

从未使用组件 提供商（providers: [TodoService]）作为

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'] 

}) 
export class AppComponent { 
    title:string = "Angular 2Do"; 
} 

这使得当组件初始化这样就把providers模块只即新实例。 NgModule