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
_)を作成できます。
このためには、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
このようなものを探しているなら教えてください。
あなたは同じために入力を使用することができます
<app-messagecomponent [YourInputVariableName] = "YourMessage"> </ app-messagecomponent>
app.compnent書き込み
YourMessage:any = 'messageComponentに表示されるメッセージ';
app-message.componentに書き込みます
@ Input YourInputVariableName:any;
this.YourInputVariableNameによってapp-messagecomponentのメッセージを印刷できます