グローバルコンポーネントへの角度2のプッシュメッセージ

Question

角度2への新規作成すべてのビュー/コンポーネントからのエラー メッセージを表示するグローバルエラーコンポーネントに取り組んでいます。

は、どのように私は別のコンポーネントからグローバル誤差成分を通信することができます。**

// appComponent.ts 
appComponet will have several components 
    @Component({ 
     selector: 'app', 
     template: ` 
      <notification-component></notification-component> 
      <header-component></header-component> 
      <router-outlet></router-outlet> 
      <footer-component></footer-component> 
    }) 
    **I like to push messages to notification-component. 
    here is the notificationComponent** 
    import { Component, OnInit } from '@angular/core'; 
    @Component({ 
     selector: 'notification-component', 
     templateUrl:"app/notification/notification-view.component.html", 
     styleUrls:["app/notification/css/notification-view.component.css"] 
    }) 
    NotificationViewComponent will have notificationMessages 
    export class NotificationViewComponent implements OnInit { 
     notificationMessages = []; 
     hideNotification: boolean = false; 
     ngOnInit(): void { 
      this.notificationMessages.push("We arre sorry -- an error occurred while one of your request. "); 
     }  
     hideNotificationSection() { 
      this.hideNotification = true; 
     } 
    } 

私は別のコンポーネント（ないアプリのコンポーネントからの）からのメッセージをプッシュしようとしています。

他のコンポーネントの通知コンポーネントにメッセージをプッシュするにはどうすればよいですか？

Answer 1

お客様のすべてのコンポーネントで共有されているサービスにエラーを報告してください。 rxjs/Subjectクラスを使用して、エラーをサブスクリプションされているすべてのコンポーネントに '放出'します。

2つのインポートが必要です。ここで

import { Subject } from 'rxjs/Subject'; // to emit errors 
import { Subscription } from 'rxjs/Subscription'; // to subscribe to the emiter 

エラーサービスの一例であり、：あなたは（サブスクリプションをキャンセルすることを忘れないでください）好きな場所

@Injectable() 
export class ErrorService { 

    public subject_error: Subject<string> = new Subject(); 

    public addError(error: string){ 
     subject_error.next('error'); 
    } 
} 

は、対象者に登録：

@Component({ 
    ... 
}) 
export class MyComponent OnInit, OnDestroy { 

    private subscription:Subscription = new Subscription(); 

    constructor(
     private errorService: ErrorService, 
    ) {} 
    ngOnInit(){ 
     this.subscription = this.errorService.subject_error.subscribe(
      error => console.log(error) 
     ); 
    } 
    ngOnDestroy(){ 
     this.subscription.unsubscribe(); 
    } 
} 

がエラーを追加されます次のように簡単です：

this.errorService.addError('an error occurred');