サービスを使用して別のコンポーネントを使用してngIfをトグルしますか？

Question

私はこれまでにイオンタブコンポーネントからブール値を変更する関数を実行しながら、別のコンポーネントの要素を切り替えるようにしています。

//App.module.ts - 簡潔

import { AppGlobals } from './globals'; 

@NgModule({ 
    providers: [AppGlobals] 
}) 

//Globals.ts

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/share'; 
import 'rxjs/add/operator/startWith'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class AppGlobals { 
    // use this property for property binding 
    public showSearch:BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); 

    setShowSearch(search){ 
     this.showSearch.next(search); 
     console.log(search); 
    } 
} 

// Tabs.ts

import { AppGlobals } from '../../app/globals'; 

constructor(private _appGlobals: AppGlobals) { 
    this._appGlobals.showSearch.subscribe(value => this.search = value); 
} 

toggleSearch() { 
    this.search = !this.search; 
    console.log(this.search); 
} 

のためにダウンカット//Tabs.html

(ionSelect)="toggleSearch();" 

//これは、しかし、これが動作していないと思われる別のコンポーネント

<div *ngIf="search" [ngClass]="{'slideInRight':showSearch, 'fadeOut':!showSearch}" class="search-filters animated"> 

以内にいくつかのHTML上で、私は値を切り替えるよしかし、世界的な「showSearchは」同じ滞在するようです。 2つのコンポーネント間で要素の切り替えを行う正しい方法は何ですか？

助けを借りても大変感謝しています。

Answer 1

@VladuIonutが、残念ながら違いを確認するためには表示されません別のコンポーネントでtoggleSearch()メソッド呼び出し

toggleSearch() { 
    this.search = !this.search; 
    console.log(this.search); 
    this._appGlobals.showSearch.next(this.search); 
} 

import { AppGlobals } from 'path/to/app/globals'; 
@Component({...}) 
export class SubComponent implements OnInit { 

    showSearch: boolean = false; 

    constructor(private _appGlobals: AppGlobals) { 

    } 

    ngOnInit() { 
     this._appGlobals.showSearch.subscribe(value => this.showSearch = value); 
    } 

} 

サブコンポーネントのテンプレート

<div *ngIf="showSearch">content</div>