Angular 6-通过服务将消息传递到组件之间 [英] Angular 6 - Passing messages via service to from component to message component

问题描述

我正在尝试如何从app.component.ts传递消息以显示在messageComponent.ts

I am trying out how to pass a message from app.component.ts to be displayed in messageComponent.ts

在app.component.html上我添加了<app-messagecomponent></app-messagecomponent>

添加它什么也没显示的那一刻.

Add the moment it's just showing nothing.

我在服务中也有一种方法:

I also have a method in a service:

message.service.ts

message.service.ts

message(message) {
    return message;
}

所以我要做的是通过消息服务传递来自其他组件的消息，以使其显示在app-messagecomponent.html

So what I want to do to pass a message from other components via the message service so it's displaying in the app-messagecomponent.html

例如来自app.component.ts:

For example from app.component.ts:

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

我该怎么做?

推荐答案

在这种情况下，要使用服务将消息从一个组件传递到另一个组件，可以创建全局消息总线或事件总线(publish/subscribe pattern).

In this case to pass a message from one component to another component using a service , you can create a global message bus or event bus (publish/subscribe pattern).

为此，我们需要Rxjs中的Subject(使用.next()方法发出值)和Observable(使用.subscribe()收听消息)，现在这是角度6的基本部分. (对于此示例，我将Rxjs 6与rxjs-compat包一起使用)

For this we need the Subject (to emit values using .next() method) and Observable (to listen to the messages using .subscribe() ) from Rxjs which is now an essential part of angular 6. (For this example I am using Rxjs 6 along with rxjs-compat package)

在这里，我们将使用MessageService类发送一条消息，该类被声明为@Injectable以便作为组件中的依赖项注入.单击app.component.html时，将在按钮上发出该消息.将在message.component.ts中检索相同的消息，以将其显示在html模板message.component.html中.我们将在app.component.html中包括<app-messagecomponent></app-messagecomponent>的MessageComponent选择器.

Here we will be sending a message using MessageService class which is declared as @Injectable to inject as a dependency in component. The message will be emitted on a button click from app.component.html . The same message will be retrieved in message.component.ts to show it in the html template message.component.html. We will include the selector for MessageComponent which is <app-messagecomponent></app-messagecomponent> in the app.component.html.

这是下面的完整代码

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

如果message是undefined，我在这里使用了Elvis运算符.

Here I have used Elvis operator in case the message is undefined .

这是一个有效的演示: https://stackblitz.com/edit/rxjs-snaghl

Here is a working demo : https://stackblitz.com/edit/rxjs-snaghl

如果您正在寻找类似的东西，请告诉我.

Let me know if you are looking for something like this.

这篇关于Angular 6-通过服务将消息传递到组件之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！