Angular 4 视图也未从服务中更新

我正在努力解决我的视图未从服务更新的问题。

我想要实现的是消息处理。我向服务发送消息并且订阅的组件得到更新。在模型上，一切正常，但视图根本没有改变。

我的服务：

import {Injectable} from '@angular/core';
import {Observer} from 'rxjs/Observer';
import {Subscription} from 'rxjs/Subscription';
import {Subject} from 'rxjs/Rx';

import {MyMessage} from './myMessage';

@Injectable()
export class MessageHandlingService {
    private _message: Subject<MyMessage> = new Subject();

    handle(message: string, stack: string) {
        // console.log('handle', message, stack);
        let newMyMessage: MyMessage;

        if (stack) {
            newMyMessage = new MyMessage(2, message, stack);
        } else {
            newMyMessage = new MyMessage(1, message, stack);
        }

        this._message.next(newMyMessage);
    }

    subscribeMessages(observer: Observer<MyMessage>): Subscription {
        // console.log('MessageHandling - subscriber accepted');
        return this._message.subscribe(observer);
    }
}

我的组件：

import {Component, OnInit, OnDestroy} from '@angular/core';
import {Observer} from 'rxjs/Observer';
import {Subscription} from 'rxjs/Subscription';

import {MessageHandlingService} from './messageHandling.service';
import {MyMessage} from './myMessage';

@Component({
    templateUrl: './my-messager.component.html',
    selector: 'mymy-messager'
})
export class MyMessagerComponent implements OnInit, OnDestroy, Observer<MyMessage> {

    private _subscription: Subscription;

    display: boolean = false;

    msg: MyMessage = null;

    constructor(private messageHandling: MessageHandlingService) {}

    ngOnInit() {
        console.log('MyMessager is subscribing');
        this._subscription = this.messageHandling.subscribeMessages(this);
    }

    ngOnDestroy() {
        console.log('MyMessager is UN-subscribing');
        if (this._subscription) {
            this._subscription.unsubscribe();
        }
    }

    /* istanbul ignore next */
    complete() {}

    /* istanbul ignore next */
    error(e: any) {
        if (console) {
            console.error(e);
        }
    }

    next(message: MyMessage) {
        console.log('observed next', message);
        this._showMessage(message);
    }

    private _showMessage(message: MyMessage) {
        this.msg = message;
        console.log('Settind display to true')
        this.display = true;
    }

    hideDialog() {
        this.msg = null;
        this.display = false;
    }
}

和组件 HTML

{{msg}}
{{display}}
<span *ngIf="msg">
    <span *ngIf="msg.severity === 1">
        <p-dialog 
            header="Information message"
            [(visible)]="display" 
            modal="modal"
            showEffect="fade">
            <p>{{msg.message}}</p>
            <footer>
                <div
                    class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                    <button type="button" pButton icon="fa-close" (click)="hideDialog()" label="OK"></button>
                </div>
            </footer> 
        </p-dialog>
    </span>
    <span *ngIf="msg.severity === 2">
        <p-dialog 
            header="Technical message"
            [(visible)]="display" 
            modal="modal"
            showEffect="fade">
            <p>{{msg.message}}</p>
            <br />
            <hr />
            <p style="white-space: pre;">{{msg.stackTrace}}</p>
            <footer>
                <div
                    class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
                    <button type="button" pButton icon="fa-close" (click)="hideDialog()" label="OK"></button>
                </div>
            </footer> 
        </p-dialog>
    </span>
</span>

我试过了

ChangeDetectorRef.detectChanges()

和

ChangeDetectorRef.markForCheck()

和

ApplicationRef.tick()

乃至

NgZone run

但没有运气。相同的代码适用于 Angular 2。