서비스를 사용하여 개별 구성 요소로 토글 링 하시겠습니까?

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

는 //이 그러나이, 내가 값을 그러나 글로벌 "showSearch"을 전환하고있어 작동 표시되지 않는 별도의 구성 요소

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

내에서 일부 HTML에 동일하게 유지 보인다. 두 요소간에 요소 토글을 수행하는 올바른 방법은 무엇입니까?

아무런 도움이 필요하지 않습니다.

Answer 1

당신의 Tabs.ts 이벤트를 방출 할 때 다른 구성 요소에 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>