web-dev-qa-db-ja.com

Angular 6-サービスを介してコンポーネントからメッセージコンポーネントにメッセージを渡す

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

これどうやってするの？

angulartypescriptangular6
13
Paul B

この場合、サービスを使用して1つのコンポーネントから別のコンポーネントにメッセージを渡すには、グローバルメッセージバスまたはイベントバス（_publish/subscribe pattern_）を作成できます。

このためには、angular 6の不可欠な部分であるSubjectからObservable（.next()メソッドを使用して値を出力する）とRxjs（.subscribe()を使用してメッセージを聞く）が必要です。 （この例では、rxjs-compatパッケージとともにRxjs 6を使用しています）

ここでは、_@Injectable_として宣言されたMessageServiceクラスを使用してメッセージを送信し、コンポーネントに依存関係として注入します。メッセージは、_app.component.html_からのボタンクリックで発行されます。同じメッセージが_message.component.ts_で取得され、htmlテンプレート_message.component.html_に表示されます。 _<app-messagecomponent></app-messagecomponent>_の_app.component.html_である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 }}
_

ここでは、messageがundefinedの場合にElvis演算子を使用しました。

これが実際のデモです： https://stackblitz.com/edit/rxjs-snaghl

このようなものを探しているなら教えてください。

21
Niladri

あなたは同じために入力を使用することができます

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

app.compnent書き込み

YourMessage：any = 'messageComponentに表示されるメッセージ';

app-message.componentに書き込みます

@ Input YourInputVariableName：any;

this.YourInputVariableNameによってapp-messagecomponentのメッセージを印刷できます

1
HARSHA BHAT