（Angular）从子级销毁父级订阅答案

【问题标题】：(Angular) Destroying parent subscriptions from child（Angular）从子级销毁父级订阅
【发布时间】：2022-01-18 02:27:48
【问题描述】：

//父组件

subscription: Subscription[] = [];

//stuff

constructor(private http: HttpService, private route: ActivatedRoute) {

  const subLoading = this.http.loading.subscribe((loading: boolean) => {
    this.loading = loading;
  });

//stuff to do

   this.subscription.push(subLoading);
   this.subscription.push(subData);
}

ngOnDestroy() {
  console.log("logged if logging out directly from here")
  this.subscription.forEach((sub) => {
    sub.unsubscribe();
  });
}

//子组件

与从孩子到父母的路线相关联 (父 URL : domain/list , eg.: Child URL: domain/list/item/53 )

//应用路由

const routes: Routes = [
  { path: '', component: AuthComponent },
  { path: 'list/:pageID', component: ListComponent, canActivate: [AuthGuard] },
  {
    path: 'list/item/:id',
    component: ListItemDetailComponent,
    canActivate: [AuthGuard],
  },
];

//标题

    export class HeaderComponent implements OnInit {
  public isLoggedIn = false;
  private userSub: Subscription;

  constructor(private authService: AuthService) {}

  ngOnInit(): void {
    this.userSub = this.authService.user.subscribe((user) => {
      this.isLoggedIn = !!user ? true : false;
    });
  }

  ngOnDestroy(): void {
    this.userSub.unsubscribe();
  }

  logOut() {
    this.authService.logOut();
  }
}

在标题中我取消订阅，销毁用户（BehaviourSubject）并注销

但是我在父组件中订阅的许多 BehaviourSubjects如果我在子组件中退出时不会被销毁

有什么办法吗？

【问题讨论】：

您能否提供您的代码的全貌。
我添加了一堆，希望它仍然可以遵循，你对这个问题有什么想法吗？或者我可以通过其他方式取消订阅父组件中的订阅？
如果列表组件路由仍然活跃，组件不会被销毁。如果您想注销并留在列表组件中，那么您可以使用 authService 通知您的所有组件有关注销并取消订阅特定订阅。否则，如果您导航到特定于注销的路线，那么您的列表组件将被销毁，并且取消订阅将被调用 onDestroy。
尝试使用类似：destroyed$ = new Subject(); ngOnDestroy() { this.destroyed$.next(true); } 和 this.http.loading.pipe(takeUntil(this.destroyed$)).subscribe((loading) => {});。这样你就不需要管理那些烦人的订阅了
@MehyarSawas “如果您导航到注销特定路线，那么您的列表组件将被销毁”您是什么意思？以某种方式创建注销路由？

标签： angular typescript observable subscription unsubscribe

【解决方案1】：

只是一点，你不会破坏 BehaviourSubjects ，你会破坏订阅，这就是为什么其他订阅了相同 behaviorSubject 的组件会保留它们的订阅。我认为您可以在注销时使用其他主题发出，并在每个订阅中使用它，使用 takeUntil() 运算符。 (takeUntil rxjs operator examples)

更新：
认证服务：

logoutSubject = new Subject(); // 
logout$ = this.logoutSubject.asObservable();

在您想要订阅用户直到注销的任何组件中

this.authService.user
.pipe(takeUntil(this.authService.logout$)) // it will managing subscription until logout observable emit
.subscribe((user) => {
      this.isLoggedIn = !!user ? true : false;
    });

我认为这应该可以解决您的问题，但请注意，如果您再次尝试登录，该订阅将无法正常工作，因为已终止。

【讨论】：

“注销时使用其他主题发出”你能详细说明一下吗？我可以在注销时使用什么其他主题？这与我在父组件中订阅的那些有什么关系