複数のコンポーネントでコードを使用する角度ヘルプ

Question

質問があります。このメニューはコンポーネントヘッダーに必要です。 と私は、右のメニューボタンに表示/非表示にしたい主なコンポーネントに異なるdivを持っています。しかし、私は私のコードを分割するときに、これは私が同じコンポーネントに両方を持っているときに動作しません。

<ul> 
<li><a (click)="ShowHome()" class="active" href="#home">Home</a></li> 
<li><a (click)="ShowAboutme()" href="#news">About me</a></li> 
<li><a href="#contact">Contact</a></li> 
<li><a href="#about">About</a></li> 

メニューが私のヘッダーにあります。

<div> 
    <div class="box" *ngIf="showHome"> 
     <p>home 1</p> 
     <p>home 2</p> 
    </div> 
</div> 

私が家を押すときに表示したいdiv。

<div> 
    <div class="box" *ngIf="showAboutme"> 
    <p>about me 1</p> 
    <p>about me 2</p> 
    </div> 
</div> 

別のボタンの別のdiv。

showHome:boolean; 
showAboutme:boolean; 
ShowHome(){ 
this.showAboutme = false; 
this.showHome = true; 
} 
ShowAboutme(){ 
this.showHome = false; 
this.showAboutme = true; 
} 

これは2つの異なるコンポーネントでコードを分割したい場合、どこに配置するのかわからないコードです。私はheader.component.tsにこれを入れると、そのコンポーネントのすべてのhtmlコードを追加すると動作します。

すべてのヘルプは

Answer 1

あなたが別のコンポーネントにあなたのコードを分割している、あなたは二つの異なるコンポーネント間の通信をサポートするために、観察可能な使用する必要があります:)非常に歓迎されるでしょう。

あるコンポーネントの値の変更は、監視可能な状態で別のコンポーネントが利用できるようにすることができます。これを達成する方法がここにあります。

共有サービスを作成します。今すぐあなたのコンポーネント でこの共有サービスをインポートして、この

component.show() 
component.hide() 

を聴くように値を設定し、この

constructor(private component: componentService) {} 

のようなあなたのコンストラクタにそれを注入

import { Injectable } from '@angular/core'; 
import 'rxjs/add/operator/toPromise'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 

@Injectable() 
export class AppService { 
private titleSubject = new Subject<any>(); 
private loaderSubjectt = new Subject<any>(); 

constructor() { } 



setTitle(title: string) { 
    this.titleSubject.next({ title: title }); 
} 

getTitle(): Observable<any> { 
    return this.titleSubject.asObservable(); 
} 

show() { 
    this.loaderSubjectt.next({ state: true }); 
} 

hide() { 
    this.loaderSubjectt.next({ state: false }); 
} 

} 

コンポーネントサービスを呼び出してみましょうこのような変数の変更

this.appService.show().subscribe(res => { 
       this.reportTitle = res.state; 
      }); 

あなたはあなたがあなたのアプリケーションのページ間を移動するようにルータを使用する必要があります

this.appService.getTitle().subscribe(res => { 
       this.title = res.title; 
      });