0

Criei este componente para mostrar mensagem de sucesso ou não.

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.css']
})
export class SnackBarComponent {

  snackBar: MatSnackBar

  constructor(

  ) {}

  openSnackBar(message: string, isOnline : boolean) {
    this.snackBar.open(message, undefined, 
      { duration: 3000, 
        panelClass: isOnline ? ["online", "onlineAction"] : "offline" }
      );
  }
}

Para chamar estou fazendo assim:

onSubmit(form){
    const snackBarComponent = SnackBarComponent;
    snackBarComponent.prototype.openSnackBar(dados.mensagem, true);
}

Só que apresenta este erro no console do navegador:

ERROR TypeError: Cannot read property 'open' of undefined
        at Object.SnackBarComponent.openSnackBar (snack-bar.component.ts:18)
        at MunicipioFormComponent.onSubmit (municipio-form.component.ts:115)
        at Object.eval [as handleEvent] (MunicipioFormComponent.html:1)
        at handleEvent (core.js:13547)
        at callWithDebugContext (core.js:15056)
        at Object.debugHandleEvent [as handleEvent] (core.js:14643)
        at dispatchEvent (core.js:9962)
        at eval (core.js:12301)
        at SafeSubscriber.schedulerFn [as _next] (core.js:4343)
        at SafeSubscriber.__tryOrUnsub (Subscriber.js:243)
    View_MunicipioFormComponent_0 @ MunicipioFormComponent.html:1
    proxyClass @ compiler.js:14653
    DebugContext_.logError @ core.js:14996
    ErrorHandler.handleError @ core.js:1509
    dispatchEvent @ core.js:9966
    (anonymous) @ core.js:12301
    schedulerFn @ core.js:4343
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
    SafeSubscriber.next @ Subscriber.js:190
    Subscriber._next @ Subscriber.js:131
    Subscriber.next @ Subscriber.js:95
    Subject.next @ Subject.js:56
    EventEmitter.emit @ core.js:4311
    NgForm.onSubmit @ forms.js:5762
    (anonymous) @ MunicipioFormComponent.html:1
    handleEvent @ core.js:13547
    callWithDebugContext @ core.js:15056
    debugHandleEvent @ core.js:14643
    dispatchEvent @ core.js:9962
    (anonymous) @ core.js:10587
    (anonymous) @ platform-browser.js:2628
    ZoneDelegate.invokeTask @ zone.js:421
    onInvokeTask @ core.js:4740
    ZoneDelegate.invokeTask @ zone.js:420
    Zone.runTask @ zone.js:188
    ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1517
    globalZoneAwareCallback @ zone.js:1543
    MunicipioFormComponent.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

O que pode ser ?

1
  • Para chamar não seria assim: snackBarComponent.openSnackBar(dados.mensagem, true); ?
    – NoobSaibot
    Commented 6/04/2018 às 6:12

1 Resposta 1

1

Você não esta inicializando o snackBar, você tem que por ele no construtor por angular injetar ele.

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.css']
})
export class SnackBarComponent {     

  constructor(
      private snackBar: MatSnackBar,
      private messageService: MessageService
  ) {
  this.message.getMessages().subscribe(message=>this.openSnackBar(message.message, message.isOnline ))
}

  openSnackBar(message: string, isOnline : boolean) {
    this.snackBar.open(message, undefined, 
      { duration: 3000, 
        panelClass: isOnline ? ["online", "onlineAction"] : "offline" }
      );
  }
}

message.service.ts

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

@Injectable()
export class MessageService{
    private messageSubject= new Subject<any>();

    constructor() {}

    addMessage(message) {
        this.messageSubject.next(message);
    }

    getMessages(): Observable<any> {
        return this.messageSubject.asObservable();
    }
}
9
  • Sim, fiz o que você disse. Não ocorreu erro pois, entendo que não chamei este componente. Como chamo ? Se faço isto, dá o mesmo erro. const snackBarComponent = SnackBarComponent; snackBarComponent.prototype.openSnackBar(dados.mensagem, true); Entendeu ?
    – Guilherme
    Commented 6/04/2018 às 13:02
  • Voce quer chamar do mesmo componente? Se sim você pode chamar assim: this.openSnackBar(dados.mensagem, true); Commented 6/04/2018 às 13:24
  • Não. Exemplo. Existe os componentes: Bairro, BairroBusca, Estado, EstadoBusca, entre outros, mais de 50. A idéia é criar este componente e chamar nos formulários passando os parametros quando necessário. Entendeu ?
    – Guilherme
    Commented 6/04/2018 às 14:14
  • nesse case você precisa criar um serviço que você injeta nos outros components com um behavior subject que você recebe os parâmetros ai você mostra quando necessário. Vou editar minha resposta pra te dar uma ideia. Commented 6/04/2018 às 14:16
  • Ai para chamar no Bairro, seria assim: No construtor, coloco assim: private messageService : MessageService; ai na execução assim: messageService.addMessage("minha mensagem"); Correto ?
    – Guilherme
    Commented 6/04/2018 às 14:46

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 .