angular 2 service injection issue

Question

My project structure:

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 is the parent of the list and form components

Whaen I start application I see in console:

but if expand all I see:

Which result actual and why in second view I see 1 and in another 2.

Look at this https://jsfiddle.net/w4wz302s/. You mutate property and console.log() prints a reference to the object, and by the time you pop it open, it's changed. See also http://stackoverflow.com/questions/7389069/console-log-object-at-current-state — yurzui, Dec 15 '16 at 09:31

score 2 · Accepted Answer · edited May 23 '17 at 12:02

2

The console.log '+' button can only show you the current state of the object, not the object at the snapshot in time of when it was called.

See console.log() async or sync? for a more in depth explanation.

So order: 1, is the final state of the object.

edited May 23 '17 at 12:02

Community

1
1

answered Dec 15 '16 at 09:30

Simon Briggs

1,249
1
11
14

score 1 · Answer 2 · answered Dec 15 '16 at 09:27

never use providers( providers: [TodoService] ) in component as

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

it makes new instance when component initialise so put providers in module only ie. NgModule

angular 2 service injection issue

2 Answers2