1

Preciso de uma orientação por favor, tenho uma estrutura de componentes em um projeto Angular:

1) Componente Cabecalho

2) Componente Corpo e dentro deste o Componente Rodape

O botão existente dentro do componente Cabecalho precisa exibir/ocultar as <div> que estão dentro dos demais componentes, no caso a <div class="card"></div> e a <div class="footer></div>.

Exemplo:

Componente Cabecalho.html:

<button (click)="toggleShow()">Esconder / Exibir</button>

Componente Cabecalho.ts:

isShown: boolean = false;


toggleShow() {

this.isShown = ! this.isShown;

}

Componente Corpo.html:

<div class="card" *ngIf="isShown">
  <p>Conteúdo</p>
</div>

E dentro do Componente Corpo o Componente Rodape:

<div class='footer' *ngIf="isShown">
  <p>&COPY;</p>
</div>

Podem me ajudar?

9
  • Não sabemos como está a hierarquia das suas pastas no projeto, mas, dependendo dá para usar eventEmitter() ,ou, o mais indicado que seria um service.
    – LeAndrade
    Commented 12/05/2020 às 12:14
  • Eu tentei usar o eventEmitter(), mas sou novato no Angular, não consegui entender como aplicar ainda. Você poderia me ajudar? A estrutura das pastas e como descrevi acima: cabecalho, corpo e dentro do corpo Rodape. Obrigado. Commented 12/05/2020 às 13:24
  • O componente cabecalho não é pai dos outros componentes logo eventEmitter não vai funcionar terá que fazer isso utilizando um service.
    – LeAndrade
    Commented 12/05/2020 às 16:42
  • Sim, o cabecalho não é o pai, ele é irmão do componente corpo, já o componente rodape é filho do componente corpo, a melhor solução seria um service? pode me ajudar? Commented 12/05/2020 às 16:53
  • Então eu to apertado aqui no trampo hj mas dá uma pesquisada em behaviorSubject, esse link é muito bom e em português dá pra entender legal, se seguir os passos ali provavelmente conseguirá fazer o que quer: medium.com/xp-inc/…
    – LeAndrade
    Commented 12/05/2020 às 17:17

1 Resposta 1

1

Como o componente cabeçalho não é pai dos outros componentes, o recomendado é utilizar o BehaviorSubject em um service do angular.

Criando um service

Você irá precisar criar um novo service para o cabeçalho, você pode optar por criar um manualmente:

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

@Injectable()
export class CabecalhoService {

  private dataSource = new BehaviorSubject(false);
  data = this.dataSource.asObservable();

  constructor() { }

  updateToggle(toggle: boolean) {
    this.dataSource.next(toggle);
  }

ou você pode usar os comandos do AngularCLI: ng generate service cabecalho e adicionar o BehaviorSubject; Logo após você deverá inserir esse service no seu module:

...
@NgModule({
  ...
  providers: [CabecalhoService]
  ...
})
...

Modo de uso

Agora que você já tem o service você deverá "chamá-lo" nos componentes que você deseja utilizar:

constructor(
    ...
    private cabecalhoService: CabecalhoService
  ) { }

Agora você pode utilizar o seu componente, iremos começar pelo componente do cabeçalho. no seu método "toggleShow(...)":

this.cabecalhoService.updateToggle(this.isShown);

E pronto, seu cabeçalho já está enviando os dados para o service, agora nos componentes que você deve utilizar:

ngOnInit() {
 this.cabecalhoService.data.subscribe(data => {
  // faça o que for necessário quando os dados forem alterados
  })
}

Você pode aprender mais sobre services do angular no Tour of Heroes do angular, entretanto lá não utilizam o BehaviorSubject.

1
  • Obrigado mtwzim! Vou tentar implementar desta forma. Commented 28/05/2020 às 20:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .