Angular 2在變量更改后查看不更新

Question

我有一個MessageService，當用戶執行編輯某些內容等特定操作時，它使用ReplaySubject類來觸發事件。 所以事件將從BaseService類觸發，負責持有管理面板模板的MainComponent類偵聽事件，當它收到消息時將顯示在template.I有一個BaseComponent類，我的所有組件都從它擴展這個類有一個消息字段，用於保存消息字符串。 BaseComponent類不是單例，因此顯然在每個組件上都會實例化它。 我的問題是當用戶在組件之間導航時，消息仍將被放置。 即使它的值為null，但消息也不會消失。

我的MessageService類：

import {ReplaySubject} from 'rxjs/ReplaySubject';

export class MessageService{

public messageSource;
public messageEvent;


constructor(){
    this.messageSource  = new ReplaySubject(1);
    this.messageEvent   = this.messageSource.asObservable();
}


public setMessage(message){
    this.messageSource.next(message);
}

我的MainComponent類：

export class MainComponent extends BaseComponent{


constructor(public router:Router,public authService:AuthService,
            public messageService:MessageService){
    super(router);
}

ngOnInit(){
    this.messageService.messageEvent.subscribe(msg => {
        this.message = msg;
    });
}

我的模板：

 <div class="row" *ngIf="message">
                <div class="alert alert-success" *ngIf="message.type=='success'">
                    <button data-dismiss="alert" class="close" type="button">×</button>
                    {{message.message}}
                </div>
                <div class="alert alert-danger" *ngIf="message.type == 'error'">
                    <button data-dismiss="alert" class="close" type="button">×</button>
                    {{message.message}}
                </div>
            </div>

和我的BaseComponent類：

export class BaseComponent {

public permission = new PermissionController();
public data;
public route = null;
public invalidateData=false;
public invalidateObject = null;
public message = null;

constructor(public router:Router){
    console.log('message : ',this.message);
}


/**
* Handles response received from api call.
* @param Response
**/
public handleResponse(response){
    if(response){
        if(this.route){
            this.router.navigate(this.route);
        }
        this.data = response;
    }
}


public handleMessage(response){
    if(response){
        this.invalidateDataArray();
    }
}

private invalidateDataArray(){
    if(this.invalidateData){
        var index = this.data.indexOf(this.invalidateObject);
        this.data.splice(index,1);
    }
    return true;
}

public navigateTo(url:string){
    this.router.navigate([url]);
}

}

和我的BaseService：

private setMessage(type){
    if(this.shouldShowMessage){
        switch (type) {
            case "done":
                this.messageService.setMessage({type:'success',message:'Operation Successfully Completed'});
                break;
            case 'fail':
                this.messageService.setMessage({type:'success',message:'Operation Failed.'});
                break;
        }
    }
}

Answer 1

通常，更改檢測的問題是Angular2默認只檢測對象引用在屬性值更改時更改時的更改。

要確保更改檢測工作，請確保通過克隆對象來更改對象引用。例如，boundObject = Object.assign（{}，{}，boundObject）;

或者如果你需要深度克隆使用lodash。