web-dev-qa-db-fra.com

Angular 6 - Transmettre des messages via le service d'un composant à un autre)

J'essaie de faire passer un message de app.component.ts à afficher dans messageComponent.ts

sur app.component.html J'ai ajouté <app-messagecomponent></app-messagecomponent>

Ajoutez le moment, il ne montre rien.

J'ai aussi une méthode dans un service:

message.service.ts

message(message) {
    return message;
}

Donc, ce que je veux faire pour transmettre un message d'autres composants via le service de messagerie afin qu'il s'affiche dans le app-messagecomponent.html

Par exemple, depuis app.component.ts:

sendMessageToService() {
    this.myservice.message('my Message to be displayed in the messageComponent');
}

Comment puis-je faire ceci?

angulartypescriptangular6
13
Paul B

Dans ce cas, pour transmettre un message d'un composant à un autre à l'aide d'un service, vous pouvez créer un bus de messages global ou un bus d'événements (publish/subscribe pattern).

Pour cela, nous avons besoin de Subject (émettre des valeurs avec la méthode .next()) et Observable (pour écouter les messages avec .subscribe()) de Rxjs qui est maintenant une partie essentielle de angular 6. (Pour cet exemple, j'utilise Rxjs 6 avec le paquetage rxjs-compat)

Ici, nous allons envoyer un message en utilisant MessageService class qui est déclaré comme @Injectable À injecter en tant que dépendance dans composant. Le message sera émis sur un clic de bouton à partir de app.component.html. Le même message sera récupéré dans message.component.ts Pour l'afficher dans le modèle html message.component.html. Nous allons inclure le sélecteur pour MessageComponent qui est <app-messagecomponent></app-messagecomponent> Dans le app.component.html.

Voici le code complet ci-dessous

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 }}

Ici, j'ai utilisé l'opérateur Elvis au cas où le message serait undefined.

Voici une démo de travail: https://stackblitz.com/edit/rxjs-snaghl

Faites-moi savoir si vous cherchez quelque chose comme ça.

21
Niladri

vous pouvez utiliser l'entrée pour le même

<app-messagecomponent [YourInputVariableName] = "YourMessage"> </ app-messagecomponent>

dans app.compnent ecrire

YourMessage: any = 'mon message à afficher dans le messageComponent';

dans app-message.component write

@ Input YourInputVariableName: any;

vous pouvez imprimer le message dans app-messagecomponent par this.YourInputVariableName

1
HARSHA BHAT