Question

我正在尝试如何传递来自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');
}

我该怎么做？

Answer 1

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

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

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

以下是完整的代码

<强> message.service.ts

app.component.html

<强> app.component.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.html

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();
  }
}

<强> message.component.ts

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

<强> message.component.html

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();
    }
}

这里我使用了Elvis运算符，以防<p>The incoming message : </p> <br> {{message?.text }}为message。

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

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

Answer 2

你可以使用相同的输入

＆LT; app-messagecomponent [YourInputVariableName] = ＆＃34; YourMessage＆＃34; ＆GT;＆LT; / APP-messagecomponent＆GT;

在app.compnent写

YourMessage：any =＆＃39;我的消息将显示在messageComponent＆＃39;;

在app-message.component中写

@Input YourInputVariableName：any;

您可以通过 this.YourInputVariableName

在app-messagecomponent中打印消息

Answer 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');

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

3 个答案: