无法使用服务将数据从一个组件传递到另一个组件

问题是我可以从一个组件获取数据，然后将其传递给服务，但另一个组件无法在此服务之后获取该数据。
这些组件是兄弟姐妹。无法使用服务将数据从一个组件传递到另一个组件

服务

import { Injectable } from '@angular/core'; 

@Injectable() 
export class TodosService { 

todo:string = '' 

    constructor() { } 

    insertTodo(todo: string) { 
    this.todo = '' + todo; 
    console.log(this.todo) 
    } 

}

组分1（从它以数据）

import { Component } from '@angular/core'; 
    import { TodosService } from '../todos/todos.service'; 

    @Component({ 
     selector: 'app-todo-form', 
     templateUrl: './todo-form.component.html', 
     styleUrls: ['./todo-form.component.css'] 
    }) 
    export class TodoFormComponent { 

     constructor(private todosService: TodosService) {} 

    todo:string = '' 

    submitTodo() { 
     this.todosService.insertTodo(this.todo); 
     console.log('form ', this.todo) 
     this.todo = '' 
    } 

    }

HTML

<input type="text" [(ngModel)] = 'todo' (input)='submitTodo()'>

组分2（应该获取数据的一个）

import { Component, OnInit } from '@angular/core'; 
import { TodosService } from '../todos/todos.service'; 

@Component({ 
    selector: 'app-todo-list', 
    templateUrl: './todo-list.component.html', 
    styleUrls: ['./todo-list.component.css'] 
}) 
export class TodoListComponent implements OnInit { 

todos:string[] = [] 

    constructor(private todosService: TodosService) { } 

    ngOnInit() { 
    return this.todos.push(this.todosService.todo); 
    } 

}

从第二组件

待办事项数组总是空

来源

2017-09-13 Allan

我认为你应该使用rxjs主题

简单的例子：

服务：

import { Injectable } from '@angular/core' 
import { Subject } from 'rxjs/Subject' 

@Injectable() 
export class XTestService { 

    todo: Subject<string> 

    constructor() { 
     this.todo = new Subject<string>() 
    } 

    setTodo(t: string){ 
     this.todo.next(t) 
    } 
}

在第一部分，你应该设置你的数据（我这里使用的虚拟字符串，但你可以实现它如你所愿）

组件1：

import { Component, OnInit } from '@angular/core' 
import { XTestService } from './xtest.service' 

@Component({ 
    selector: 'xtest-cop', 
    template: ` 
    <button type="button" (click)="submitTodo()" >Submit Todo</button> 
    ` 
}) 

export class XTestComponent { 

    constructor(private xservice: XTestService) { } 

    submitTodo() { 
     this.xservice.setTodo("dummy data") 
    } 
}

而且比你应该订阅从服务到待办事项和等待数据：

组件2

import { Component, OnInit } from '@angular/core' 
import { XTestService} from './xtest.service' 
@Component({ 
    selector: 'xtest2-cop', 
    template: `{{todo}}` 
}) 

export class XTest2Component implements OnInit{ 

    todo: string 

    constructor(private xservice : XTestService){} 

    ngOnInit():void{ 
     this.xservice.todo.subscribe(value => { 
      this.todo = value 
     }) 
    } 
}

来源

2017-09-13 16:50:16 lingthe

或者你可以用一个getter做要更简单，不需要使用'主题'。 – DeborahK

嗨@DeborahK，你能提供一个例子与getter。我认为可以这样做，因为这些组件是兄弟姐妹。吸气剂解决方案是否包含这两个组件的父项？在此先感谢。 – lingthe

我在这篇博文中有一个例子：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/它允许与应用程序中的任何组件共享数据，不管它的关系如何。 – DeborahK

这似乎对我来说，你的第二个组件的初始化，ngOnInit（），是发生在调用方法submitTodo（）之前，因此该值永远不会被推放入第二个组件中的todo数组中。

来源

2017-09-13 16:32:38 megalucio

无法使用服务将数据从一个组件传递到另一个组件

回答

相关问题