угловой 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"; 
} 

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

} 

ToDo-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? для более подробного объяснения.

Заказ: 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"; 
} 

это делает новый экземпляр, когда компонент Initialise так положить providers в модуле только то есть. NgModule