如何将子组件的布尔变量传递给父路由出口组件以同步加载状态？

这个问题我之前做项目的时候也碰到过——用router-outlet动态加载子组件时，父组件确实没法直接拿到子组件内部的数据加载状态，不过有几个实用的办法可以解决，我给你详细说说：

方法一：用共享服务传递状态（最推荐，适配多场景） #

这种方式适合多个组件之间共享加载状态，不管是路由组件还是普通组件都能用。

第一步：创建一个加载状态服务 #

先写一个全局的服务，用来管理加载状态的流转：

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

@Injectable({ providedIn: 'root' })
export class LoadingService {
  // 用BehaviorSubject保存状态，初始值设为true（默认处于加载中）
  private loadingStatus$ = new BehaviorSubject<boolean>(true);
  // 对外暴露可观察对象，避免外部直接修改状态
  public loadingStatusObs$ = this.loadingStatus$.asObservable();

  // 提供修改状态的方法
  setLoadingStatus(status: boolean) {
    this.loadingStatus$.next(status);
  }
}

第二步：父组件订阅状态变化 #

在父组件里注入这个服务，监听状态变化来更新isLoadingFlg：

import { Component, OnInit } from '@angular/core';
import { LoadingService } from './loading.service';

@Component({
  selector: 'app-parent',
  template: `
    <div *ngIf="isLoadingFlg">Loading...</div>
    <router-outlet></router-outlet>
  `
})
export class ParentComponent implements OnInit {
  isLoadingFlg = true;

  constructor(private loadingService: LoadingService) {}

  ngOnInit() {
    // 订阅状态变化，自动更新加载提示的显示
    this.loadingService.loadingStatusObs$.subscribe(status => {
      this.isLoadingFlg = status;
    });
  }
}

第三步：子组件加载完成后更新状态 #

子组件在数据加载完成（不管成功还是失败）后，调用服务的方法修改状态：

import { Component, OnInit } from '@angular/core';
import { LoadingService } from './loading.service';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `<!-- 子组件的内容 -->`
})
export class ChildComponent implements OnInit {
  constructor(
    private loadingService: LoadingService,
    private dataService: DataService
  ) {}

  ngOnInit() {
    this.dataService.fetchData().subscribe({
      next: (data) => {
        // 这里处理你的数据逻辑
        console.log('数据加载完成', data);
        // 通知父组件关闭加载提示
        this.loadingService.setLoadingStatus(false);
      },
      error: (err) => {
        // 错误处理逻辑
        console.error('数据加载失败', err);
        // 即使出错也要关闭加载提示，避免用户一直看到loading
        this.loadingService.setLoadingStatus(false);
      }
    });
  }
}

方法二：通过router-outlet的激活事件监听子组件输出 #

如果你的场景只有父路由和对应的子路由组件，用这个方法更直接，不需要额外的服务。

第一步：子组件定义输出事件 #

在子组件里声明一个@Output事件，数据加载完成后触发：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-child',
  template: `<!-- 子组件内容 -->`
})
export class ChildComponent implements OnInit {
  // 定义输出事件，用来通知父组件加载完成
  @Output() loadingComplete = new EventEmitter<void>();

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.fetchData().subscribe({
      next: (data) => {
        // 处理数据
        this.loadingComplete.emit(); // 触发事件
      },
      error: (err) => {
        // 错误处理
        this.loadingComplete.emit(); // 触发事件
      }
    });
  }
}

第二步：父组件监听router-outlet的激活事件 #

父组件里给router-outlet绑定activate事件，拿到子组件实例后监听它的输出：

<div *ngIf="isLoadingFlg">Loading...</div>
<!-- 绑定activate事件，拿到激活的子组件实例 -->
<router-outlet (activate)="onChildActivate($event)"></router-outlet>

然后在父组件的TS代码里处理这个事件：

import { Component } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  isLoadingFlg = true;

  onChildActivate(componentInstance: any) {
    // 先判断是不是我们需要的子组件（如果有多个子路由的话）
    if (componentInstance instanceof ChildComponent) {
      // 监听子组件的加载完成事件
      componentInstance.loadingComplete.subscribe(() => {
        this.isLoadingFlg = false;
      });
    }
  }
}

两种方法各有千秋：共享服务适合复杂场景，比如多个组件都需要控制加载状态；而router-outlet的激活方式更轻量化，适合简单的父子路由场景，你可以根据自己的项目情况选~

备注：内容来源于stack exchange，提问作者Rick