Angular 6 - 通过服务将消息传递到从组件到消息组件

Posted 2023-03-13

【中文标题】Angular 6 - 通过服务将消息传递到从组件到消息组件

【英文标题】：Angular 6 - Passing messages via service to from component to message component

【发布时间】：2018-10-26 13:11:16

【问题描述】：

我正在尝试如何传递来自app.component.ts 的消息以显示在messageComponent.ts 中

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

添加它什么都不显示的那一刻。

我在服务中也有一个方法：

message.service.ts

message(message) 
    return message;

所以我想要通过消息服务从其他组件传递消息，以便它显示在 app-messagecomponent.html 中

例如来自 app.component.ts：

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

我该怎么做？

【问题讨论】：

如果您想使用服务将消息传递给另一个组件，可以查看我的答案。

【参考方案1】：

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

为此，我们需要来自Rxjs 的Subject（使用.next() 方法发出值）和Observable（使用.subscribe() 收听消息），这现在是角度6 的重要组成部分。 （对于这个例子，我使用 Rxjs 6 和 rxjs-compat 包）

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

下面是完整的代码

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 

这里我使用了 Elvis 运算符，以防 message 是 undefined 。

这是一个工作演示：https://stackblitz.com/edit/rxjs-snaghl

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

【讨论】：

很好的解释。

请给我一个例子，让我交流两个不相关的组件，共享那里的信息。而且我对文件夹结构也感到困惑。（它需要是两个具有自己名称的组件，我们必须使用服务在它们之间共享数据。

这是很好的解释，我明白了，但我想要两个不相关的组件示例的解释：Homecomponent 和 ProductDetailComponent... 我需要将数据从家发送到产品详细信息组件...请回来给我你的回答。提前致谢。

@user3669026 这适用于任何组件。不仅是父子

谢谢尼拉德里。这意味着它是适用于两种方法的父子关系还是不相关的组件？

【参考方案2】：

您可以使用相同的输入

在 app.compnent 中写入

YourMessage:any='我要在messageComponent中显示的消息';

在 app-message.component 中写入

@Input YourInputVariableName:any;

您可以通过 this.YourInputVariableName

在 app-messagecomponent 中打印消息

【参考方案3】：

使用ng-interconnect 库。这允许从任何角度实体向另一个实体发送数据。

您可以从多个点进行广播或接收。

广播示例-

let messageStream: IMessageStream = createBroadcaster('home/stateChanged');   //Create a broadcaster```
 
 ...
 ...
 /*Receive from it from another component somewhere in the hierarchy*/
 
 let userReceiver = receiveFrom('home/stateChanged', 'contacts/user', (data, error, complete) => 
  console.log(data);
  console.log(error);
  console.log(complete);
 )
 
 
 '''
 '''
 /*Broadcast messages from the first component*/
 nessageStream.emit('logged-in');