Basculer ngIf avec des composants séparés en utilisant le service?

Question

Donc j'essaie de basculer un élément dans un composant séparé, tout en tirant la fonction pour changer la valeur booléenne du composant onglets ioniques jusqu'à présent j'ai ceci.

//App.module.ts - Abattre par souci de concision

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();" 

// Ce

est en code HTML dans le composant séparé

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

Toutefois, cela ne semble pas fonctionner, je basculer la valeur mais la « showSearch » global semble rester le même. Quelle est la bonne façon de réaliser le basculement de l'élément entre les deux composants?

Toute aide est très appréciée.

Answer 1

votre Tabs.ts émettra un événement lorsque toggleSearch() appel de méthode

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

dans un autre composant

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); 
    } 

} 

modèle de sous-composants

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