角2変数の変更後にビューが更新されない

Question

ReplaySubjectクラスを使用してユーザーが特定のアクションを実行したときにイベントを発生させるMessageServiceがあります。したがって、イベントは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を使用してください。