Angular 7来自可观察订阅的奇怪行为
Angular 7是一种流行的前端开发框架，它基于TypeScript构建，并且具有许多强大的功能和工具。在开发过程中，有时会遇到一些奇怪的行为，这可能是由于可观察订阅的问题引起的。
可观察订阅是Angular中用于处理异步数据流的一种机制。它允许我们订阅数据源，并在数据发生变化时接收通知。然而，有时候我们可能会遇到一些奇怪的问题，例如订阅不起作用、订阅多次触发等。
这些奇怪的行为可能是由于以下几个原因引起的：
- 订阅多次：在Angular中，当我们多次订阅同一个可观察对象时，每个订阅都会触发一次数据流。这可能导致数据重复或不一致的问题。为了避免这种情况，我们应该确保只订阅一次，并在不需要时取消订阅。
- 订阅未完成：有时候我们可能会在订阅之前执行一些异步操作，例如从服务器获取数据。如果我们在订阅之前未完成这些操作，订阅可能会失败或返回不完整的数据。为了解决这个问题，我们可以使用操作符（例如switchMap、concatMap等）来确保在订阅之前完成必要的操作。
- 内存泄漏：如果我们在组件销毁之前未取消订阅，可能会导致内存泄漏。这意味着订阅仍然存在，即使组件已经被销毁。为了避免内存泄漏，我们应该在组件销毁时取消订阅，可以使用ngOnDestroy生命周期钩子来实现。
- 错误处理：当可观察对象发生错误时，我们应该及时处理这些错误，以避免应用程序崩溃或产生不可预料的行为。我们可以使用catchError操作符来捕获和处理错误。
总结起来，当遇到Angular 7中可观察订阅的奇怪行为时，我们应该检查是否存在多次订阅、订阅未完成、内存泄漏或错误处理不当等问题。通过遵循最佳实践和使用适当的操作符，我们可以解决这些问题并确保可观察订阅的正常运行。
关于Angular 7的更多信息和相关产品，您可以参考腾讯云的文档和资源：
- Angular 7官方网站：https://angular.io/
- 腾讯云前端开发服务：https://cloud.tencent.com/product/fecs
- 腾讯云云原生应用平台：https://cloud.tencent.com/product/tke
- 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
- 腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
- 腾讯云音视频处理服务：https://cloud.tencent.com/product/mps
- 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发服务：https://cloud.tencent.com/product/mss
- 腾讯云对象存储服务：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙服务：https://cloud.tencent.com/product/vr
相关·内容
2回答
我们需要在angular中为主题定义ngOnDestroy吗？
angular、typescript
使用subject时，是否需要使用ngOnDestroy钩子取消订阅，还是会被angular自动取消订阅？
浏览 15提问于2020-04-14得票数 0
2回答
如何更改Observable的成员对象字段的值？
angular、rxjs、ngrx、spartacus-storefront
ngOnInit()中有Observable<>。 ngOnInit() {
this.products$ = this.someService.getMissingProducts();
} this.products$是Observable类型，并且产品具有代码(字符串类型)成员字段。我想要将所有Product[]的代码值更改为新的值。 对于这个愚蠢的问题我很抱歉。我不擅长typescript和angular，所以我试图找到一些解决方案，但失败了。 有什么简单的方法吗？ 提前谢谢。 附注:我将此代码添加到我的解决方案中。谢谢爱德华 this.products$
浏览 60提问于2021-01-09得票数 0
回答已采纳
1回答
两次角呼叫服务
angular
getPersonalMast(name:string){
console.log("patient");
this.masterDataService.getPersonalMast(this.staff).subscribe( console.log("Inside subscribe"), response => this.staffInfo = response);
return this.staffInfo;
}
THis是名为
getPersonalMast(personName
浏览 1提问于2017-07-18得票数 2
2回答
订阅在服务呼叫中的意义:角2/4
angular、rxjs、angular-observable
我是angular4的初学者，并试图理解可观察和订阅的概念。
export class MyComponent implements OnInit {
private subscription: Subscription
ngOnInit() {
// case -1 -> service call 1 with subscription
this.subscription = this.service1.method1().subscribe(() => {});
// case-2 -> servic
浏览 1提问于2018-04-24得票数 0
回答已采纳
2回答
为什么组件销毁后订阅仍然存在？
angular、rxjs
我的Angular应用程序有很多组件，其中一个是MyComponent，它的组件类如下所示：
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
@Component({
selector: 'app-my',
templateUrl: './my.component.html',
s
浏览 2提问于2018-04-09得票数 4
1回答
我应该取消订阅组件中可观察定义的内容吗？
angular、rxjs、unsubscribe
我有一个角度分量，可观测(BehaviourSubject)集作为类成员。
在某种程度上，我赞同它。
问题是:我是否应该在ngOnDestroy()中取消订阅？
还不清楚，因为可观察到的生命周期似乎与组件的生命周期相同，因此我们可能不应该关心内存泄漏。
示例代码：
@Component(...)
class MyComponent implements OnInit {
public subject: BehaviorSubject<string> = new BehaviorSubject('');
public ngOnInit():
浏览 14提问于2022-02-02得票数 1
回答已采纳
5回答
棱角服务被摧毁，但是为什么订阅仍然从可观察到的？
angular、rxjs
使用角，我有一个服务是在一个组件中提供的。该服务具有可观测性，并且该组件被订阅到此可观测项。我原以为我不需要取消订阅/可观察的订阅，因为应该用组件销毁服务，从而也可以观察到服务。然而，一个快速的测试显示，可以观察到的人是活着的。
在我的视线之外发生了什么？会在服务之外运行吗？或者当提供服务的组件被销毁时，服务实际上没有被销毁吗？
浏览 6提问于2019-12-12得票数 4
回答已采纳
1回答
异步绑定与组件属性在角上映射的优势？
javascript、angular、asynchronous、rxjs、observable
当我的服务调用返回HTML页面的数据时，使用异步绑定与只映射到具体对象有什么好处或好处？
下面是这两个选项的一个例子。
映射到组件属性
// component
event: any;
// ngOnInit()
this.eventService.getEvent(this.id).pipe(take(1)).subscribe(response => {
this.event = response;
}, error => {
console.log(error);
});
// service
getEvent(id: number): Observable&
浏览 1提问于2021-12-03得票数 1
1回答
更好的方式取消订阅角？
angular、design-patterns
是否有任何设计模式在角12取消可观察的订阅？
目前，我们正在开发一个角度应用程序，并发现我们的一些组件没有unsubscribe到可观察的，因此它正在造成内存泄漏和一些奇怪的行为在不同的页面。因此，与其像下面这样使用ngDestroy关闭每个组件中的订阅，还有更好的方法像一个可以在应用程序中重用的设计模式而不改变现有行为和尽可能少的代码吗？
import {Component, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import { HttpClient } from '@an
浏览 1提问于2022-10-25得票数 0
2回答
应该保留对可观察对象的引用，还是只需订阅即可
angular、garbage-collection、observable、rxjs5、subscription
我最近看到了这个(Angular)代码：
ngOnInit() {
this.subscriptions.add(
this.createSomeObservable()
.subscribe(v => console.log('v=', v))
);
}
这是安全的吗?还是应该将从this.createSomeObservable()返回的可观察对象存储为该类的成员，以防止被垃圾回收？
this.createSomeObservable()实际上是从ngrx存储中选择的，如果重要的话。
浏览 8提问于2018-05-29得票数 1
2回答
订阅主题在行中接收多次时间
angular、rxjs
我使用Subject将信息传递给不同的页面，但是当我收到可观察到的信息时，我会多次收到它，而我只发送一次，我猜问题会出现，因为我在后面更改了页面
我的主题
public handleUpdate = new Subject<any>();
updateHandleSearch(): Observable<any> {
return this.handleUpdate.asObservable();
}
updatingHandleSearch(providerResponse: any) {
this.handleUpdate.next(provid
浏览 0提问于2019-07-17得票数 0
回答已采纳
1回答
从另一个类引用处理程序
android、multithreading、rx-java、android-handler、rx-android
我有一个服务，它使用一个处理程序在后台运行一些进程。
在另一个使用rxjava的类中，我引用了observable正在处理的特定处理程序。
.subscribeOn(HandlerScheduler.from(ReadWriteTransportService.mMessageHandler))
.observeOn(AndroidSchedulers.mainThread())
像这样引用服务的实例字段的内存issues...by会遇到麻烦吗？
从类外引用该处理程序的更好方法是什么？
浏览 1提问于2015-08-29得票数 0
2回答
热与冷观测
angular、rxjs、angular-httpclient
在RxJS中，热观测是使用外部生产者的可观测性，而冷可观测的是使用本地生产者(参见)。
无论何时打电话，HttpClient.post都会使用冷观测值发送数据和重复。
有什么方法可以从角度上判断某一特定方法是否使用了可观察到的热或冷？
浏览 0提问于2017-09-06得票数 10
回答已采纳
4回答
Angular2:取消订阅服务中的http observable
angular、rxjs5、unsubscribe
在Angular2服务中从http订阅中取消订阅的最佳实践是什么？ 目前我这样做，但我不确定这是否是最好的方式。 import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import { Subject } from "rxjs/Subject";
import { ISubscription } from "rxjs/Subscription";
@Injectable()
export class SearchSe
浏览 44提问于2016-11-29得票数 49
回答已采纳
1回答
我应该取消订阅管道()的角吗？
angular、rest、observable
我读过一些关于可观察和不订阅的文章。但是我不明白关于管道()的一些信息。管道在某些情况下会自动取消订阅。这些是什么案子？我有一个连接到我的服务器的服务和一个组件。我应该在这里取消订阅并使用ngOnDestroy吗？它为CRUD应用程序提供简单的服务。
例如，服务中的一种方法：
public getSubject(size:number, page:number) : Observable<Subject[]> {
return this.http.get<Subject[]>(environment.apiUrl + '/subject?size='
浏览 3提问于2020-03-27得票数 1
回答已采纳
2回答
如何正确使用OnDestroy
angular、optimization、memory-leaks、ondestroy、lifecycle-hook
我见过很多关于ngOnDestroy的问题。我认为我们中的许多人没有正确地使用它，或者根本没有使用它。
我只想看看你如何正确使用ngOnDestroy的一系列技巧，以及在最好的情况下我们应该做些什么来防止内存泄漏、加速和优化web应用程序。
在任何情况下，当你使用它时，你必须做什么？(你必须采取什么步骤？)
如果你想做得完美，你需要走多远？取消所有提述等
浏览 1提问于2019-02-01得票数 2
回答已采纳
2回答
如果可观察到的用户使用异步管道，是否需要取消订阅？
angular、rxjs、angular-pipe
我需要确定两种处理可观测值的不同方法是否同样有效，或者其中一种方法是否会导致内存问题。
在下面的示例中，foo$和bar是从服务接收其值的模板变量。每个人都有自己的可观察性。在组件中，从订阅中显式地给出了bar的值，然后在OnDestroy()中结束该订阅。然而，foo$没有显式地订阅服务，而是在模板中使用async管道。
foo$和bar都是显示服务数据的有效方式，还是foo$有问题，因为没有取消对内存清理的订阅？
ExampleService:
Injectable()
export class ExampleService {
get foo$(): Observable<
浏览 2提问于2019-05-08得票数 3
回答已采纳
1回答
我的问题是关于组件的订阅事件，注入到matdialog或bottomsheet中，例如，假设我这样做
NewUser() {
const formData = {
Title: 'NewUser',
ValidateBtn: false,
FormFields:
[
new InputField('Login', InputType.Text, [Validators.required, Validators.min(8), Validators.max(8) ] ),
new InputField('nam
浏览 0提问于2019-09-20得票数 0
1回答
如何在断开连接前清理所有setInterval
angular、ionic-framework、ionic4
我正在寻找一种方法来清理注销前的所有间隔，我有几个间隔在不同的页面。当我断开连接时，间隔保持旋转。谢谢
ngOnInit() {
var firstInterval = setInterval(() => {
this.get();
console.log("ok");
}, 2000);
浏览 0提问于2021-02-28得票数 0
1回答
这个可观察到的内存泄漏了吗？
angular、memory-leaks、rxjs、rxjs-observables
根据的说法，我对可观察到的东西还很陌生。下面的例子泄漏了内存。然而，我在网上看到了大量的教程，展示了这样的例子。
someObservable.subscribe(data => {
// do something
});
上面的代码是否泄漏内存？我们总是要取消订阅吗？http电话也可以吗？
this.http.get<Any>('someurl').subscribe(response => {
// do something
});
可观察到的一般最佳做法是什么？
浏览 2提问于2020-02-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
