角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