[英]angular 2 service injection issue
My project structure: 我的项目结构:
app.component.ts: 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: 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: 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 app
是list
和form
组件的父级
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
. 哪个结果是实际的,以及为什么在第二个视图中看到
1
和另一个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. console.log的“ +”按钮只能显示对象的当前状态,而不能显示快照调用时对象的状态。
See console.log() async or sync? 看到console.log()异步还是同步? for a more in depth explanation.
进行更深入的解释。
So order: 1, is the final state of the object. 所以顺序:1,是对象的最终状态。
never use providers( providers: [TodoService]
) in component as 切勿在组件中使用provider(
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";
}
it makes new instance when component initialise so put providers
in module only ie. 当组件初始化时,它将创建新实例,因此仅将
providers
放在模块中。 NgModule
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.