Angular 6: pasar mensajes a través del servicio de un componente a otro

Solución:

En este caso, para pasar un mensaje de un componente a otro componente utilizando un servicio, puede crear un bus de mensajes global o un bus de eventos (publish/subscribe pattern).

Para esto necesitamos el Subject (emitir valores usando .next() método) y Observable (escuchar los mensajes usando .subscribe() ) de Rxjs que ahora es una parte esencial de angular 6. (Para este ejemplo, estoy usando Rxjs 6 junto con el paquete rxjs-compat)

Aquí enviaremos un mensaje usando MessageService clase que se declara como @Injectable para inyectar como una dependencia en el componente. El mensaje se emitirá al hacer clic en un botón desde app.component.html . El mismo mensaje se recuperará en message.component.ts para mostrarlo en la plantilla html message.component.html. Incluiremos el selector para MessageComponent cual es <app-messagecomponent></app-messagecomponent> en el app.component.html.

Aquí está el código completo a continuación

message.service.ts

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

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

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

app.component.ts

import { Component } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name="Angular 6";

  constructor(private service:MessageService){}

  sendMessage(): void {
        // send message to subscribers via observable subject
  this.service.sendMessage('Message from app Component to message Component!');   
  }

  clearMessage():void{
    this.service.clearMessage();
  }
}

app.component.html

<button (click)="sendMessage()">Click here to test message</button> <br><br>
<app-messagecomponent></app-messagecomponent>

message.component.ts

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { MessageService } from './message.service';

@Component({
    selector: 'app-messagecomponent',
    templateUrl: 'message.component.html'
})

export class MessageComponent implements OnDestroy {
    message: any = {};
    subscription: Subscription;

    constructor(private messageService: MessageService) {
        // subscribe to app component messages
        this.subscription = this.messageService.getMessage().subscribe(message => { this.message = message; });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

message.component.html

<p>The incoming message :  </p>  <br>
{{message?.text }}

Aquí he usado el operador de Elvis en caso de que message es undefined .

Aquí hay una demostración funcional: https://stackblitz.com/edit/rxjs-snaghl

Avísame si estás buscando algo como esto.

puede utilizar la entrada para el mismo

en app.compnent escribir

YourMessage: any = ‘mi mensaje se mostrará en el messageComponent’;

en app-message.component write

@Input YourInputVariableName: cualquiera;

puede imprimir el mensaje en el componente de mensaje de la aplicación por this.YourInputVariableName

---

---

Utiliza Nuestro Buscador