Angular 2服务-每当我更改路由时，数据都会被清除？
Angular 2服务是Angular框架中的一个重要概念，用于共享数据和逻辑代码。在Angular应用中，当更改路由时，数据可能会被清除的原因是服务的生命周期问题。
解决这个问题的方法是使用一个可注入的服务，将数据存储在该服务中，以便在路由更改时保持数据的持久性。以下是解决方案的步骤：
- 创建一个可注入的服务：使用Angular的
@Injectable()装饰器创建一个服务类，例如DataService。 - 在服务中定义数据：在
DataService中定义一个属性，例如data，用于存储需要在路由更改时保持的数据。 - 在组件中注入服务：在需要访问数据的组件中，使用
constructor注入DataService，并将其作为一个私有属性。
constructor(private dataService: DataService) { }- 在组件中使用服务：在组件中，可以通过访问
dataService的属性来获取或修改数据。
this.dataService.data = 'example data'; // 设置数据
console.log(this.dataService.data); // 获取数据- 在路由更改时保持数据：通过在服务中存储数据，无论路由如何更改，数据都将保持不变。
这样，无论何时更改路由，数据都将保持不变。这种方法适用于需要在整个应用程序中共享数据的情况，例如用户信息、购物车内容等。
对于Angular 2服务的更多信息和示例，请参考腾讯云的相关产品和文档：
相关·内容
2回答
无法使用服务将数据从一个角度组件传递到另一个角度组件。以下是服务代码：
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
public serviceData: string;
}
以下是组件home
import {Component, OnInit, Input} from '@angular/core';
import {Router} from "@angular/router";
import { DataSer
浏览 0提问于2017-08-02得票数 1
回答已采纳
目前我正在尝试使用Angular 9创建一个名为products的模块，其路径为localhost:4200/products，对于查找指定的产品，我使用此路径)
每次我需要看到一个产品的时候，我都想实现这个组件。我的问题是，当我使用路由器链接( to )从当前产品页面转到另一个产品时，url会改变，但内容页面不会改变，并保持上一个产品的相同信息。
我不知道路由器链路重定向是怎么回事
我的代码.ts
import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/s
浏览 3提问于2020-09-06得票数 1
当我的应用程序出现错误时，我遇到了一个问题:没有数据服务提供者。
这通常发生在您忘记将您的服务作为提供者列出时，无论是在app模块中还是在功能模块中，但在我的例子中，我将其设置为提供者。
我的应用程序构建在具有Ngrx语句管理的Range9上，并与Firestore进行交互。
我没有做一个简单的提供者，因为我试图将服务绑定到ngrx/data中，而ngrx/data实际上是设计用来使用Rest的，而firebase不是。
浏览器中的错误* NullInjectorError： -> DataService -> DataService: NullInjectorError: No
浏览 2提问于2020-03-11得票数 1
我正在尝试找出在Angular 6中获得当前路由参数的最佳方法。
目前，我必须将ActivatedRoute作为参数传递给服务的方法，然后在服务中使用它。
export class MainComponent {
constructor(private dataService: DataService, private activeRoute: ActivatedRoute) { }
getChartsData() {
return this.dataService(this.activeRoute);
}
}
@Injectable({
pro
浏览 4提问于2018-09-06得票数 14
我在腾讯云新买了个域名，但是域名所有者信息填的是公司A，但是腾讯云这个账号的实名认证信息是公司B，该情况这个域名能够备案成功吗？
浏览 1178提问于2021-10-16
2回答
我目前正在尝试使用"BehaviorSubject“通过数据服务在组件之间发送数据。在第一个组件中，我正在更新messageSoruce，在第二个组件中，我检索数据，但它是空的。我检查了"this.card.img“值不是空的。我错过了什么？ 数据服务 import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
@Injectable()
export class DataService {
private mes
浏览 36提问于2019-02-17得票数 4
回答已采纳
1回答
我简单地看了几篇文章和官方的角度指南，但它们似乎不能帮助我解决我的任务。这就是我想要和做的。 假设我有一个带有产品列表页面的Angular应用程序。此外，这个应用程序将有类别列表页面和一些N列表页在未来。正如您所看到的，它们非常相似，并且在公共数据表中有一个组件。 <app-data-table [type]="'product'"></app-data-table> 它的实现方式如下： import {Component, Input, OnInit} from '@angular/core';
import {Dat
浏览 27提问于2020-03-27得票数 2
我正在尝试将一个具有配置文件(datService.configuration)的角服务(datService.configuration)加载到组件(Home)中。在我的主组件中，如果我不将DataServiceConfiguration添加到提供程序列表中，则会得到以下错误：
"Uncaught (承诺)：DataServiceConfiguration！(家庭-> DataService -> DataServiceConfiguration)的供应商“
dataService.ts：
import { Injectable } from 'angular2/
浏览 4提问于2016-05-21得票数 0
我知道如何在Angular 2中将子组件嵌套在父组件中，这很容易实现。但是我不太清楚如何将一个值从一个组件传递到另一个组件。在我的用例中，我希望从登录组件向下传递用户名到聊天组件，这样用户名就会显示在chatbox中。这就是我要做的一切。我知道@Input()装饰器可能会在这里使用，我只是不清楚如何实际使用它来传入值。
这是我的登录组件html中的内容：
<div class="center-box">
<form name="form" class="form-fields" (ngSubmit)="f
浏览 31提问于2017-01-06得票数 1
回答已采纳
2回答
我对角度很陌生，我试图在导航后将数据从一个组件(HomeComponent)传递到另一个组件(ProfileComponent)。
我创建了一个共享服务(DataService)。我在HomeComponent和ProfileComponent中都注入了服务，但是当我在HomeComponent中设置message属性的值并试图在ProfileComponent中检索它时，值是未定义的，因为DataService不是同一个实例。
DataService是在提供者数组中的AppModule中注册的，所以它应该是一个共享服务，并且总是同一个实例，对吗？
提前感谢
DataService.ts
浏览 0提问于2018-12-01得票数 1
回答已采纳
我是angular和typescript的新手。我有8个页面，包括登录和注册页面在我的角度项目。我需要在每个页面的用户配置文件数据，例如它的电子邮件id。我尝试通过emit函数向每个组件发送电子邮件，但它不可靠，因为每当我们刷新页面时，数据都会丢失。有没有人能建议我一个简单有效的方法来获得我的项目的每个页面/组件的电子邮件id。
下面是我的login.ts文件
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '
浏览 20提问于2021-05-15得票数 0
回答已采纳
我希望从JSON数组中获得唯一的值。
数据来自fetch API。这显然是可迭代的。
注意，产品变量是JSON的一个示例，实际上，我是通过调用GetAllProducts()来填充数据的
products =
[
{
"name": "APPLE 27 inch THUNDERBOLT DISPLAY",
"show_room": "A iCenter",
"stock": "1",
"type": "DISPLAYS",
浏览 3提问于2020-06-28得票数 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
回答已采纳
这将成功地显示Hello，因此app.component.ts正在正确引导。要么没有从DataService返回的数据，要么无法显示。没有编译器错误。在TypeScript中是否有一个弹出窗口，比如JavaScript中的警告()，我可以快速检查，看看DataService是否返回了数据？
app.component.ts
import { Component } from 'angular2/core';
import { DataService } from './data.service';
@Component({
selector: '
浏览 0提问于2016-01-16得票数 1
回答已采纳
这里的要求是，我需要在主目录中显示登录的用户，因为我有一个登录组件homecomponent，为了进行数据传输，我使用了一个名为dataService.ts的服务，对我来说，数据将传输到dataService.ts，但不会传输到主目录组件
我的代码
loginComponent中导入的数据服务
this.userName由登录的用户名组成
登录组件：
this.ds.sendMessage(this.userName);
dataService：
import { Injectable } from '@angular/core';
import { Subject } fro
浏览 0提问于2019-03-01得票数 1
我有一个ListComponent和EntryComponent，用于在列表中附加一个项目。当通过DataService将项推入列表时，列表不会在ListComponent中更新。对于angular2的工作方式有什么想法吗？
名单处：
import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
public items:Array<any> = [];
addItem(item:string):void{
this.item
浏览 2提问于2016-02-09得票数 0
1回答
在#headerComponent中是我搜索的输入字段。当用户执行搜索时，搜索查询由#websocketsService发送到节点服务器，并返回一个JSON结果。
这个结果应该触发一个#graphComponent方法。
我已经读到，使用另一个服务来处理这个问题是一个很好的实践，所以我已经为此创建了#dataService，这就是我处理可观察性的地方。
所以流程是：
headerComponent -> (触发器) #websocketService -> (搜索查询到)node.js-服务器-> (结果返回) #websocketService -> (set var
浏览 2提问于2018-02-08得票数 0
回答已采纳
我有两个组件和一个用于传输数据的服务，这里是我的服务：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DataService {
public sharedData:any;
constructor() { }
}
我向这两个组件注入了服务，这是我的第一个发送数据的服务：
constructor(private http:HttpClient,private dataService:DataSer
浏览 5提问于2021-11-09得票数 0
情境:我在我的项目中使用一个数据服务来获取本地json数据，然后将它共享给多个组件。在我的项目中，我有一个组件正在调用另一个组件。第一个组件是step组件，这个组件只从json获取带有步骤类型的数据，将它们显示为角材料步进器。第二个是表单组件，它负责通过stepId和步骤名获取每个步骤的数据，然后在每个步骤中加载它们。我想在step组件中添加delete/add步骤并更新数据，所以第二个组件也更新数据，但是当我这样做时，数据服务不会更新.我从本地json文件中获取数据，然后更改了它并使用了“角json-webservice”，但是它不起作用，下面是代码：
setControls (contro
浏览 15提问于2022-06-25得票数 0
2回答
尝试在构造函数中访问对象的数据将返回“未定义”对象。它在ngOnInit()函数上工作，但是每次组件启动时，都需要数据(将被重置)。
import { Component, OnInit, Input } from '@angular/core';
@Input() data: any;
constructor(dataService: DataService)
{
console.log(this.data); // undefined
}
ngOnInit()
{
console.log(this.dat
浏览 1提问于2018-03-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
