Início / coding / Perguntas / 79569687
Accepted
Rick
Asked: 2025-04-12 04:43:05 +0800 CST

É possível passar uma variável booleana para um componente de saída de roteador pai?

  • 772

A ideia básica é que eu queira que o texto "Carregando" seja exibido enquanto o componente filho estiver carregando dados e, em seguida, desapareça quando terminar. Mas como o componente pai pode saber quando o filho terminou de carregar os dados?

Meu pai se parece com isso:

<div *ngIf="isLoadingFlg">Loading...</div>

<router-outlet></router-outlet>

De alguma forma, preciso que o componente filho consiga definir o componente pai isLoadingFlg. O componente filho se parece com isto:

ngOnInit() {
  this.isLoadingFlg = true;
  setTimeout(() => {
    this.isLoadingFlg = false;
  }, 1000);
}
angular

1 respostas

  1. Best Answer

    Se o componente filho estivesse simplesmente no modelo do pai, isso seria um trabalho para o decorador @Output , mas como parece haver roteamento envolvido aqui, eu usaria um serviço compartilhado .

    Crie um serviço compartilhado mais ou menos assim:

    carregando.serviço.ts

    import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class LoadingService {
  private loadingState$ = new Subject<boolean>();

  public setLoading(state: boolean): void {
    this.loadingState$.next(state);
  }

  public getLoading(): Observable<boolean> {
    return this.loadingState$;
  }
}

    Observe providedIn: 'root'aqui: é isso que torna o serviço compartilhado entre todos os outros componentes que o utilizam.

    E no componente filho, injete esse serviço compartilhado usando injeção de dependência e, quando o carregamento terminar, notifique o serviço compartilhado.

    criança.componente.ts

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

@Component({
  selector: 'app-child',
  templateUrl: 'child.component.html'
})
export class ChildComponent implements OnInit {

  constructor(private loadingService: LoadingService) {}

  public ngOnInit(): void {
    setTimeout(() => {
      this.loadingService.setLoading(false);
    }, 1000);
  }
}

    E no pai, injete o serviço novamente, mas desta vez ouça as alterações do serviço de carregamento e atualize isLoadingFlgquando recebê-las.

    pai.componente.ts

    import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LoadingService } from '../shared/loading.service';

@Component({
  selector: 'app-parent',
  templateUrl: 'parent.component.html',
  styleUrl: 'parent.component.scss',
  imports: [ RouterOutlet, ... ],
})
export class ParentComponent {
  public isLoadingFlg = true;

  constructor(private loadingService: LoadingService) {
    this.loadingService.getLoading().subscribe((newState) => {
      this.isLoadingFlg = newState;
    });
  }
}

    Aqui está um StackBlitz mostrando um exemplo funcional: https://stackblitz.com/edit/stackblitz-starters-6c5kzgbg?file=src%2Fparent%2Fparent.component.ts

    • 1

relate perguntas