2

Eu tenho 3 components, um component A Pai, B Filho e um C Filho.

export class A Parent implements OnInit {
  constructor() { 
  }    
}

No component B, eu tenho um método para criar usuário:

export class B Parent implements OnInit {
  constructor() { 
}

create() {
    this.userService.create()
      .subscribe((res) => { 
        // Call other method in Component C
        //this.card.emit(null)  
      }); 
  } 

 }

E agora, eu tenho um component, onde eu preciso chamar o método da lista:

export class C Parent implements OnInit {
    constructor() { 
}

ngOnInit() {
  this.getUsers();
}
    
getUSers() {
    this.userService.getUsers()
         .subscribe((res) => {  
            this.users = res
          }); 
    } 
     
}

E aqui, a minha view:

  <div class="col s6">
    <list-administrators ></list-administrators>
  </div>

  <div class="col s6" *ngIf="card == 'create'">
    <create-administrator></create-administrator>
  </div>

  <div class="col s6" *ngIf="card == 'details'">
    <details-administrator></details-administrator>
  </div>

  <div class="col s6" *ngIf="card == 'edit'">
    <edit-administrator></edit-administrator>
  </div>

No componente B, eu tenho um método para criar um usuário. Quando ele criar, gostaria de chamar a listagem do outro filho C. Como posso fazer?

2 Respostas 2

1

Não sei te responder se está a melhor forma para fazer isso. Porém o que você poderia fazer é. A - (Pai) B - (Filho) C - (Filho)

-> então o Html deve ser algo parecido com isso:

<a>
<b (outputEmit)="emitted()" ></b>
<c #componentC></c>
</a>

No controller da A você pode declarar um evento e receber a emissão de criação no componente B, executando uma ação no controller C.

export class A
@ViewChild('componentC') componentCElement: ElementRef;

emitted() {
    this.componentCElement.MethodQueQuerExecutar();
}
1

Obrigado Renan Degrandi, eu acabei utilizando um service, compartilhar os dados com outros componentes é bem mais eficiente, pois não precisaria criar códigos repetidos, então, compartilhando .....: Service export class EventsService {

  teste = new EventEmitter<boolean>();

 constructor() { }

 getEvent(event: any) {
   this.teste.emit(event);
 }

}

Com isto posso trocar dados com outros components em tempo de execução, agora o component B Component B create() { this.userService.create() .subscribe((res) => { ... this.eventService.getEvent(true); }); }

desta forma envio para lá um valor qualquer ou objeto desejável e agora, no meu caso, eu posso fazer a verificação deste valor e se for verdadeiro no component C, eu chamo o ngOnInit do component C para fazer novamente a listagem dos dados que eu queria, desta forma ...... Component C ngOnInit() { this.eventService.card.subscribe((res) => { if(res) this.getUsers(); }) this.getUsers(); }

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 .