title: Angular 2 View not updating after variable change
body: <p>I have a MessageService that uses ReplaySubject class to fire an event when user performs specific actions like edit some content. So the Event will be fired from BaseService class and the MainComponent class which responsible for holding admin panel template listens for the event and when it received the message will be shown in template.I have a BaseComponent class too which all of my components extends from it and this class have a message field that holds the message string. The BaseComponent class is not singleton so obviously on every component shows up it will be instantiated. my problem is when the User navigates between components the message will be still put. even when it's value is null but the message will not disappears.</p>
  
  <p>my MessageService Class:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>my MainComponent class :</p>
  
  <pre><code>export class MainComponent extends BaseComponent{
  
  
  constructor(public router:Router,public authService:AuthService,
              public messageService:MessageService){
      super(router);
  }
  
  ngOnInit(){
      this.messageService.messageEvent.subscribe(msg =&gt; {
          this.message = msg;
      });
  }
  </code></pre>
  
  <p>my template :</p>
  
  <pre><code> &lt;div class="row" *ngIf="message"&gt;
                  &lt;div class="alert alert-success" *ngIf="message.type=='success'"&gt;
                      &lt;button data-dismiss="alert" class="close" type="button"&gt;×&lt;/button&gt;
                      {{message.message}}
                  &lt;/div&gt;
                  &lt;div class="alert alert-danger" *ngIf="message.type == 'error'"&gt;
                      &lt;button data-dismiss="alert" class="close" type="button"&gt;×&lt;/button&gt;
                      {{message.message}}
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>and my BaseComponent class:</p>
  
  <pre><code>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]);
  }
  
  }
  </code></pre>
  
  <p>and my BaseService:</p>
  
  <pre><code>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;
          }
      }
  }
  </code></pre>