单页面应用程序中的角度更改标头值

Question

在angular2我构建单页面应用程序，当我在viewcart组件中更改任何值然后标题值需要更改时，我尝试下面的代码但我得到header.ts文件获取结果但是html文件没有更改值，请帮忙解决这个问题

我的标题组合

import { Component, OnInit } from '@angular/core';
import { Http,Response } from '@angular/http';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { SessionService } from '../session.service';
import { BrowserModule } from '@angular/platform-browser'
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css'],
  providers:[SessionService]
})
export class HeaderComponent implements OnInit {

  constructor(
    private http:Http, 
    private route: ActivatedRoute,
    private router: Router,
    private sess:SessionService
  ) { 

  }

  ngOnInit() {
    this.sess.currentMessage.subscribe(message => {
      this.noitems = message;
    });

  }   //  end of ngoninit
}

我的viewcart组件

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Http,Response,RequestOptions,Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { CapitalizefirstPipe } from '../capitalizefirst.pipe';
import { SessionService } from '../session.service';
import { HeaderComponent } from '../header/header.component';
import {BrowserModule} from '@angular/platform-browser';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-viewcart',
  templateUrl: './viewcart.component.html',
  styleUrls: ['./viewcart.component.css'],
  providers:[SessionService,HeaderComponent]
})
export class ViewcartComponent implements OnInit {
  noitems;
  constructor(
    private http:Http, 
    private route: ActivatedRoute,
    private router: Router,
    private sess:SessionService,
    private hc:HeaderComponent
  ) {}

  ngOnInit() {
    this.getCart().subscribe(success=>{
      if(!success.error){
        this.noitems = success.quantity;
        this.sess.changeMessage(this.noitems);
      }
    },error=>{
      console.log(error);
    })
  }

}

我的服务文件

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class SessionService {

  private messageSource = new BehaviorSubject("0");
  currentMessage = this.messageSource.asObservable();
  constructor() { }
  changeMessage(message) {
    this.messageSource.next(message);
    let mes = this.messageSource.getValue();
  }
}

我的标题html文件

<header>
        <div class="cart-icon">
            <a [routerLink]="['viewcart']" class='' title='Cart Details'>
                <i class='fa fa-shopping-cart' aria-hidden='true'>({{noitems}})</i>
            </a>
        </div>