Использовать один экземпляр компонента в нескольких представлениях

Question

В моем topheader.html у меня есть:

 <responsive-mode></responsive-mode>

И в моем responsivenavigation.html у меня также есть:

 <responsive-mode></responsive-mode>

Компонент:

class ResponsiveModeComponent {
    public onlyShowOnSurfaceTablet: boolean;
    public currentMode: string;

    $onInit() {
        this.onlyShowOnSurfaceTablet = window.device.surface();
        if (window.device.surface()) {
            this.currentMode = 'desktop_windows';
        } else {
            this.currentMode = 'tablet_android';
        }
    }

    switchMode() {
        if (this.currentMode === 'desktop_windows') {
            this.currentMode = 'tablet_android';
            window.document.documentElement.className = window.document.documentElement.className.replace('tablet', 'desktop');
        } else {
            this.currentMode = 'desktop_windows';
            window.document.documentElement.className = window.document.documentElement.className.replace('desktop', 'tablet');
        }
    }
}

И html:

<div class="responsive-mode" >
    <i class="material-icons" ng-click="vm.switchMode()">
        {{vm.currentMode}}
    </i>
</div>

Я хочу, чтобы пользователь мог переключаться между режимами при необходимости.Это вроде работает.Но, похоже, в приложении есть 2 экземпляра компонента.Можно ли передать значение, установленное в 1 экземпляре компонента, в другой экземпляр компонента?Или лучше сделать так, чтобы 2 компонента совместно использовали 1 экземпляр компонента?