为什么组件中的“，providers：[TravelService]”阻止RXJS行为主体在组件之间共享数据？
在Angular中，组件之间共享数据可以通过服务来实现。服务是一个可注入的类，用于提供共享的数据和功能。当一个组件需要访问另一个组件的数据时，可以通过在组件的构造函数中注入该服务来实现。
在给定的问答内容中，"providers: [TravelService]"是一个Angular组件的元数据选项，用于指定该组件所依赖的服务。这个选项告诉Angular在组件中创建一个新的实例化的TravelService服务，并将其注入到组件中。
然而，这种方式会导致每个组件都有自己的TravelService实例，而不是共享同一个实例。这意味着每个组件都会有自己的数据副本，而不是共享同一个数据源。当一个组件修改了TravelService中的数据时，其他组件无法感知到这个变化，因为它们使用的是不同的实例。
为了实现组件之间的数据共享，可以使用Angular的依赖注入系统来提供一个单例的服务实例。这样，所有的组件都将共享同一个服务实例，从而实现数据的共享和同步更新。
要实现这个，可以将TravelService添加到应用的根级别提供商中，而不是在每个组件中提供。这样，Angular会在整个应用中创建一个单一的TravelService实例，并将其注入到需要的组件中。这样，所有的组件都将共享同一个数据源，任何一个组件对数据的修改都会被其他组件感知到。
总结起来，"providers: [TravelService]"阻止了RXJS行为主体在组件之间共享数据，因为它会为每个组件创建一个新的TravelService实例，而不是共享同一个实例。要实现组件之间的数据共享，应将服务添加到应用的根级别提供商中，以便创建一个单一的实例供所有组件使用。
相关·内容
@Component({
selector: 'app-overview-travel',
templateUrl: './overview-travel.component.html',
styleUrls: ['./overview-travel.component.scss'],
providers: [TravelService]
}) 上面的代码阻止了来自我的共享数据服务的数据(使用来自RXJS的行为主题)被正确地共享。 @Component({
selector: 'app-overview-travel
浏览 23提问于2020-01-08得票数 2
我有一个带有对象selectedProjects: Object = new Array();的名为DropdownProjectService的服务
我有两个函数，一个用于向selectedProjects添加数据，另一个用于检索数据。
dropdown-projects.service.ts
export class DropdownProjectService {
selectedProjects: Object = new Array();
constructor(private http: Http) {
this.selectedProjects
浏览 1提问于2016-02-24得票数 0
我正试图把一个演示应用程序的角2 + Rx.JS 5/Next。
我注意到每次切换路由时都会重新实例化我的组件。
下面是根应用程序的代码：
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts'
浏览 5提问于2016-04-26得票数 14
回答已采纳
2回答
我想使用subject将数据发送到另一个组件(为了赚钱的目的)。我无法取回数据。这是我的代码：
app.component.ts
import { Component } from '@angular/core';
import { shareService } from './share.service';
@Component({
selector: 'my-app',
template: `
<hello></hello>
<button (click)="passData()"
浏览 3提问于2017-08-31得票数 7
回答已采纳
1回答
我想要建立一个角4应用程序，在那里我可以搜索用户从一个数据库和使用的人的信息，我发现在不同的路线。我目前的问题是，如果我通过服务加载一些数据，更改路由并返回，数据将再次加载。
我的服务：
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rx
浏览 4提问于2017-09-28得票数 1
回答已采纳
3回答
我试图使用服务将数据从一个组件共享到另一个组件，比如body组件到header组件，但不起作用。单击“更改标题详细信息”按钮后，我希望更改标题数据详细信息，如id和name。
body.component.ts：
change(){
this.details = {
id:"45673",
name:"Micheal"
}
this.data.changeMessage(this.details);
}
common.service.ts：
import { Injectable } from '@angula
浏览 8提问于2020-03-09得票数 0
回答已采纳
我试图让组件通过共享服务发送消息，比如在中“父级和子级通过服务进行通信”。我有一个Sender组件，它调用服务的方法，在该方法中触发一个事件。还有一个Receiver组件，它只是监听事件。
问题是Receiver没有得到一个事件。下面是代码：
import {bootstrap} from 'angular2/platform/browser'
import {Injectable, Component} from 'angular2/core';
import 'rxjs/Rx';
import {Subject} from '
浏览 5提问于2016-03-03得票数 2
回答已采纳
1回答
我需要你的帮助。我正在练习在组件之间传递数据。我试图使用简单的数组和主题在组件之间传输数据。不幸的是，当我想使用subject方法添加一个元素时，我会遇到一个错误。错误如下所示：Error trying to diff 'hello'. Only arrays and iterables are allowed
我只有两个问题：
我的错误是什么，我做错了什么？，在组件之间传输数据的最好方法是什么:使用简单数组的服务或者使用subject或者使用输入输出+ EventEmmiter装饰器？
非常感谢
DataTransferService
import { Injectable
浏览 8提问于2022-09-03得票数 0
我试图在我的移动POC (Cordova2 2/Angular2 2)中创建购物车功能。我创建了在组件之间共享数据的服务。我通过组件A添加项目，并试图从组件B中读取，但我没有看到组件B中的项目。我应该在服务中添加哪些内容？
import { Injectable } from '@angular/core';
@Injectable()
export class CartService {
private vijayCart: Array<any> = [];
GetCart() {
return this.vija
浏览 4提问于2017-09-04得票数 0
回答已采纳
我正在使用Angular v2.1，我正在尝试让组件通过共享服务发送消息。
我想首先将数据从第一个组件company.component.ts发送到第二个组件modal.component.ts。
我不知道到底是哪里出了问题(如果是在发送或接收数据时)。当我调试接收数据时，我发现了一个Subscriber对象：
Subscriber {closed: false, syncErrorValue: null, syncErrorThrown: false, syncErrorThrowable: false, isStopped: false…}
在modal.service.ts中：
impo
浏览 4提问于2016-11-08得票数 0
如何决定在面对多个组件之间的交互时应该选择哪种方式？
我阅读了所有这些方法的，但是在何种情况下我们应该决定使用其中的一种方法？
有人能举几个例子吗？
编辑:我注意到我是否有服务
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { mA, mB } from '../Model/app.Model';
@In
浏览 5提问于2016-10-11得票数 3
回答已采纳
1回答
以下是解决相同问题的两种方法，即对用户在文本框中输入的某些字符进行反应性搜索。第一个解决方案来自，第二个解决方案来自即时搜索课程。
第一个解决方案使用Observable，第二个解决方案使用Subject。
Observable解决方案只使用takeUntil调用服务器一次。Subject解决方案使用distinctUntilChanged。
有人能解释一下这两种方法的优缺点吗？
使用可观察到的搜索：
@Injectable()
export class BookEffects {
@Effect()
search$: Observable<Action>
浏览 2提问于2017-03-06得票数 1
我需要传递来自两个不相关组件的数据，它们既不是父子组件也不是兄弟组件。我尝试使用已构建的服务来传递数据，并尝试构建一个新的服务来传递数据，但我总是遇到错误或数据为空。在研究过程中，它看起来像是一个选择可能是从Angular 5更新到更高的版本，但我不确定是否值得花时间更新整个项目来解决一个问题。项目中有类似的服务，用于通道，但这不是这些组件的选项。
drop.service.ts
import { Injectable, NgModule } from '@angular/core';
import { Subject } from 'rxjs/Subject'
浏览 0提问于2020-07-28得票数 0
5回答
我有一个关于用角度传递数据的问题。
首先，我没有像<parent><child [data]=parent.data></child></parent>那样的结构
我的结构是
<container>
<navbar>
<summary></summary>
<child-summary><child-summary>
</navbar>
<content></content>
</container>
浏览 3提问于2017-06-07得票数 47
回答已采纳
2回答
我在根目录(应用程序文件夹) mydata.ts中有一个界面
export interface mydata{
Data1: string;
Data2: string[];
}
将我的app.component.ts设置为
import { Component , OnInit } from '@angular/core';
import { ApiService } from "./api.service"
import { mydata } from "./mydata";
import { error } from '
浏览 27提问于2018-06-01得票数 2
回答已采纳
1回答
我正在尝试在两个组件之间进行通信。筛选器组件正在尝试通过服务http-service向结果组件发送消息。 我能够将消息发送到服务http-service，但是即使我订阅了，也不能在结果服务中接收消息。以下是代码 view.module.ts @NgModule({
declarations: [FilterComponent, ResultComponent],
imports: [
CommonModule,
FormsModule,
AgGridModule.withComponents(
[]
)
}) httpService import{Injectable}from
浏览 18提问于2019-01-13得票数 1
回答已采纳
4回答
注意:问题肯定是ionViewDidLoad()没有被执行，因为http.get确实得到了一个可观察的结果。我试图在执行请求时得到可观察的结果，以便以后得到json响应，但是我没有收到错误，浏览器的控制台也没有显示任何内容。我不知道它为什么不归还任何东西。
我试过很多次urls，并检查了很多次进口。 home.page.ts
import { ServicioService } from '../servicio.service';
import { Observable } from 'rxjs';
import { HttpClien
浏览 1提问于2019-07-02得票数 2
回答已采纳
1回答
首先，这与某些http请求无关，这是一个简单得多的场景，其中一个组件设置一个布尔值，而另一个组件基于它设置一个显示/隐藏元素。
问题是，其他组件总是在订阅回调中接收“未定义”。但是，我也尝试让主组件订阅，并且它正在正确地接收值。
这是我的密码：
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class EnablerService {
private _enabled= new Subject&
浏览 2提问于2017-09-25得票数 1
回答已采纳
2回答
我正在使用角度搜索过滤器。在相同的组件中使用它可以很好地工作。但我想让我的搜索字段在标题中，结果在另一个组件中。这是我的困难所在。我读到我可以通过@Input Decorator获取searchText变量，但不知何故它对我不起作用，或者我使用它完全错误。这是我的header.component.html的一个片段
<form>
<div class="form-group">
<label>
<input type="text" name="
浏览 0提问于2020-12-13得票数 0
1回答
我试图将一个变量从一个组件传递到另一个组件。我是通过使用服务来做到这一点的：
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SharedService {
// private questionNumber = new Subject<number>();
// questionNumber$ = this.quest
浏览 4提问于2017-06-22得票数 0
回答已采纳
你好，我正在尝试从组件(HeaderComponent)调用另一个组件的方法(HeaderComponent)。为此我用了一种服务。我创建了一个服务ProductService，它是包含这些组件的共享服务。但是，当变量值在服务中更改时，我不会更新视图，请帮助。这是代码
productservice.service.ts
import { Injectable, ChangeDetectorRef } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject }
浏览 5提问于2017-09-20得票数 2
3回答
我有两个组件(菜单和标题)和一个服务。我想要做的是，当他们从菜单中选择一个项目时，菜单将文本发送给服务，服务将其发送到标头并对其进行更改。我已经设法把它发送到服务，但我不知道为什么在头与可观察的它不更新。
服务：
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/observable/from';
import { of } from 'rxjs';
@Injectable()
expo
浏览 0提问于2018-10-23得票数 2
回答已采纳
EventEmitter是可观察到的RxJS吗？
在角度文档中，它解释了如何使用EventEmitter从子组件到父组件之间进行通信。我们应该只在组件中使用EventEmitter，还是也可以使用角度服务？
在角度文档中，它解释了父母和孩子如何通过使用可观察的RxJS主题的共享服务进行通信。在这个EventEmitter示例中，我们可以使用RxJS主题而不是RxJS主题吗？如果我们可以在服务中使用EventEmitter，请帮助转换此示例。我对角质还不熟悉。
在阅读了这些相关的文章后，我有点困惑：
浏览 6提问于2017-09-01得票数 3
1回答
我需要使用RxJS主题和可观察性将JSON对象从一个组件传递到另一个组件。这是我的代码：
meta-form.component.ts
import { SharedService } from "../../../shared/shared.service";
@Component({
selector: 'meta-form',
template: require("./meta-form.component.html"),
styles: [require("./meta-form.component.cs
浏览 1提问于2016-11-21得票数 4
回答已采纳
我想把数据发送到我的所有元素，称为‘模态’，但其中只有一个接收消息。
我有个服务：
@Injectable()
export class ModalService {
private _isOpen = new Subject();
isOpen$ = this._isOpen.asObservable();
open(id: string) {
this._isOpen.next({isOpen: true, id: id});
}
close(id: string) {
this._isOpen.next({isOpen: false, id: id});
}
和构成
浏览 1提问于2016-06-28得票数 1
回答已采纳
我有一个数据服务，它通过HTTP (由某个组件触发)运行查询，然后通过Observable公开结果。其他组件将订阅该Observable并更新其结果视图。
不管怎么说，这是个主意，但不起作用。这是我的密码。
ItemListDataService:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable, Subject } from "rxjs";
import 'rxj
浏览 1提问于2016-08-13得票数 3
回答已采纳
当我试图返回一个来自asp.core api的响应时遇到了问题：“_body 2 http get Object { _body：_body，status: 0，ok: false，statusText：”，headers：{…}，type: 3，url: null }。
构成部分：
import { Component, OnInit } from '@angular/core';
import { IIndustryType } from '../../../model/IndustryType';
import { DeveloperJobDataServ
浏览 0提问于2018-06-19得票数 1
回答已采纳
1回答
我正在使用angular 4和observable。
我需要将数据从一个组件共享到另一个组件，因为我使用的是behaviour和observable。
以下是我的代码
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Http, Response } from '@angular/http';
p
浏览 1提问于2018-07-08得票数 0
1回答
我对6号角护卫有问题。当我点击登录按钮时，它不会将我重定向到预定的路径。我的html调用login()函数，而loginService.isAutenticated在执行doLogin()方法时返回true，它在保护本身中返回false。
loginComponent.ts
import { Component, OnInit } from '@angular/core';
import { User } from '../common/user.model';
import { LoginService } from './login.service&
浏览 0提问于2018-09-24得票数 0
回答已采纳
1回答
我必须从两个订阅者那里获得数据，但我总是得到第一个订阅者的数据。
我有一个数据共享服务：
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class DataService {
private source = new BehaviorSubject<any>('');
data = this.source.asObser
浏览 1提问于2018-01-29得票数 3
回答已采纳
1回答
我想在输入网站的每一页后，在一个固定的Navbar文件中显示页面的标题。
档案结构：
-navbar.ts (where I display the title, import current title from service)
-titles.service.ts (store the current title )
-component_one.ts (Send title 1 to service)
-component_two.ts (Send title 2 to service)
navbar.ts文件
import { Component, OnInit
浏览 1提问于2016-12-09得票数 1
回答已采纳
2回答
我对BehaviorSubject有一些问题。下面是三个组件的共享服务：
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class StageEndService {
private stageNumber = new BehaviorSubject<number>(0);
private stageNumberPassed = new Beha
浏览 0提问于2016-09-13得票数 1
我有一个JSON数据，如下： import { Person } from './models';
export const People = [
{
name: 'Kimberly',
lastname: 'Garcia',
age: 26,
sex: 'F',
},
{
name: 'Chris',
lastname: 'Williams',
age: 64,
sex: 'M',
},
] as
浏览 32提问于2020-10-29得票数 0
我已经升级了一个不断增长的ng2应用程序到RC5，并将我的所有组件/管道安装到一个胖主模块中。为了对抗臃肿，我试图将我的应用程序分割成不同的模块(同时也着眼于最终做懒散的加载)。
下面是我创建的包含一些通用组件的子模块：
my-shared.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/for
浏览 2提问于2016-08-17得票数 11
回答已采纳
服务--
import {Injectable} from '@angular/core';
import {UserData} from '../user-data/user-data.component';
@Injectable()
export class UserDataService {
constructor(){}
userdata:UserData[];
getData(){
console.log('service',this.userdata);
return
浏览 3提问于2017-08-31得票数 0
回答已采纳
1回答
我正在尝试创建一个可重用的组件，在我的站点上进行异步调用时，它可以作为一个处理覆盖。我已经设置了一个服务，但是当调用OverlayComponent时，showOverlay似乎不会被调用：
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HashLocationStrategy, LocationStrategy } from '@angular
浏览 3提问于2016-11-30得票数 1
1回答
角度单观测者，多观察者
、、、
学习angular得到了服务、组件和观察点。 我正在尝试在我的演示应用程序中实现一种黑暗模式。控制是由一个服务完成的，该服务根据浏览器的默认设置来设置黑色主题。 它在应用程序组件中初始化，以便稍后将控制开关放置在应用程序中。 暗模式从布尔值开始工作，因此不是真就是假。据我所知，使用一个可观察对象是不够的，因为我希望多个订阅者都以两种不同的方式绑定到订阅，在服务中切换这些可观察对象。到目前为止，我非常确定这是正确的。 这部分我被卡住了。假设你想要3个不同的组件，一个是工具栏中的按钮组件，一个是设置中的复选框，另一个是切换用户主设置中的开关。 如何在服务中的观察者和每个组件之间建立双向链接，以便
浏览 19提问于2021-01-07得票数 0
我有一个在组件之间传递数据的服务，当被调用时，它可以工作，但是当我重新加载服务数据时，当我重新加载时，当我搜索重新加载时，内存被重置，所以有没有一种方法，即使在重新加载之后，也可以在不使用任何客户端存储的情况下保持数据？我很好奇的一件事是，我是否可以使用rxjs来实现这一点，但我不确定这会有什么帮助。我害怕使用本地存储，因为数据将主要是对象或数组，而不是用户id或会话id.Any输入。
浏览 0提问于2018-01-27得票数 6
我有一个简单的组件progressBar来显示(或不显示)进度条。和一个简单的可观察的服务。
以下是该服务：
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class
浏览 4提问于2017-01-26得票数 2
我对角2+还不熟悉，所以我意识到我可能走错了路。我有两个部分是兄弟姐妹。当我点击一个“链接”在一个，它重定向到另一个控制器。我想将对象传递给我要降落的组件。
到目前为止，这就是我所做的。
在第一个组件(构建列表)中，我有一个事件。
public onClick_building(building: Building) {
this._building.addBuilding(building);
this._router.navigate(['/sam/checklistsam']);
}
addBuilding在服务中(构建服务)
import { Injecta
浏览 0提问于2017-08-06得票数 1
回答已采纳
1回答
我在另一个组件(父组件)中有一个组件(子组件)。要调用子节点的标记是router-outlet。我编写了一个服务，以便子服务器可以更改父变量，因为在这种情况下，我不能使用EventEmitter和Output，但它不能工作。
服务：
import {Subject} from 'rxjs/Subject';
import {Injectable} from '@angular/core';
@Injectable()
export class TabStatusService {
private sub=new Subject<boole
浏览 1提问于2017-04-18得票数 0
回答已采纳
1回答
我目前正在尝试创建父组件和子组件。
当子组件从REST加载数据时，父组件应该显示一个加载gif。以下是代码：
common.service.ts
import { Injectable } from "@angular/core";
import { Subject } from "rxjs";
@Injectable()
export class CommonService{
private isLoadingSource = new Subject<boolean>();
public isL
浏览 0提问于2021-01-29得票数 1
我正在编写一个角+ nodejs应用程序，其中服务器侦听twitter流，前端角应用程序使用socket.io从服务器获取数据。到目前为止，一切都正常，但我无法找到一种方法来订阅使用socket.io获取数据的角服务。如何订阅我的服务所拥有的数据，以及如何将其绑定到我的视图，以便数据显示。
以下是从服务器获取数据的“角”服务代码：
import {Injectable} from 'angular2/core';
import {Observer} from 'rxjs/Observer';
import {Observable} from 'rxjs/
浏览 5提问于2016-03-26得票数 0
回答已采纳
1回答
每当我运行以下代码时，从checkIfUserHasMadeBet()函数返回的值总是为空。看起来代码并不是在等待函数返回值，而是跳过。如何让它等待函数从firebase数据库返回数据？
export class DisplayBetPage {
hasCurrentUserMadeAbet: boolean = false;
constructor(private navParams: NavParams, public navCtrl: NavController, private afAuth: AngularFireAuth, private afDatabase:
浏览 0提问于2017-08-26得票数 1
2回答
我有这个页面结构
app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
我使用共享服务在app.component.ts文件中加载所有数据
import { Component,HostListener } from '@angular/core';
import { Router } from '@angular/router'
浏览 7提问于2022-05-24得票数 1
回答已采纳
我有一个应用程序，它包括通过从一组示例中选择图像来更改背景图像的操作，其思想是编写一个服务，解析图像的json列表链接，并定义一个用于背景的服务。因此，我有一个组件1:用于视图选择的图像，组件2:用于加载图像+一个图像选择的操作，一个服务:用于更改选定的图像
服务设置在服务本身默认情况下强加的第一个映像的问题，并且当我在服务解析的映像之前选择一个映像并在组件2中查看时不能更改它，特别是组件2视图中的这个lign：
<img class="contentSizes" src={{BackService.imageLink}}>
构成部分1：
@Component({
浏览 1提问于2016-03-22得票数 2
回答已采纳
我有一个对象，我想在我的组件之间共享到一个Angular2应用程序中。
以下是第一个组件的来源：
/* app.component.ts */
// ...imports
import {ConfigService} from './config.service';
@Component({
selector: 'my-app',
templateUrl: 'app/templates/app.html',
directives: [Grid],
providers: [ConfigService]
})
ex
浏览 8提问于2016-02-08得票数 28
回答已采纳
2回答
我是新来的角场！到目前为止，我一直喜欢这种情况，但在接下来的情况下会遇到一些困难。我想在用户单击数据表中带有href标记的特定单元后，将数据从一个组件发送到另一个组件。因此，我创建了以下.ts文件
service.ts
import { Injectable } from '@angular/core';
import { HttpClient,HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
im
浏览 0提问于2019-02-16得票数 2
回答已采纳
2回答
在我的应用程序中，我已经多次这样做了。很简单，应该管用.但这一次没有。
我的问题：
我从组件A调用服务中的方法，我的组件B被订阅，但是没有反应，也没有接收任何东西。subscribe() 没有触发！
navigation-elements.service.ts
@Injectable()
export class NavigationElementsService {
updateIBOsNavigation$: Observable<any>;
private updateIBOsNavigationSubject = new Subject<any>
浏览 3提问于2017-04-12得票数 21
回答已采纳
我有一个保存从服务器接收到的用户对象的服务。当用户被存储时，我希望我的导航栏隐藏“登录”按钮(当用户被删除时显示它)。我编写了一个服务，它应该通知所有订阅的组件。
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Subject } from 'rxjs/Subject';
import { User } from '../models/user';
import { BehaviorSubject }
浏览 3提问于2017-06-28得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
