Javascript 要通过使用angular 2中的服务的子组件控制父组件（菜单隐藏/显示）

我想通过以下方式使用服务处理父组件到子组件中的菜单（隐藏/显示）：

//app.component.ts（父项）

：在这个组件中，我使用

IsShow

变量来隐藏/显示菜单；此变量链接到主要服务：

import { Component } from '@angular/core';
import { PostsService } from './post.service'
import { post } from 'selenium-webdriver/http';

@Component({
  selector: 'app-root',
  templateUrl: '<div *ngIf="IsShow">
                 <li><a routerLink="/">Home</a></li>
                 <li><a routerLink="/about/11">About</a></li>
                </div>
               <router-outlet></router-outlet>',
  providers : [PostsService]
})
export class AppComponent {
  title = 'app';
  name = 'ali';

  IsShow : boolean ;

 constructor(private postService : PostsService ){
    this.IsShow = postService.IsShow;
    postService.showChange.subscribe((value) => { 
      this.IsShow = value; 
    });

  }


}

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PostsService } from './post.service'

@Component({
  selector: 'about',
  template: '{{id}}<button (click)="showToggle()">show</button>',  
  providers : [PostsService]
})
export class AboutComponent {
   id ;
  private sub;

  constructor(private route: ActivatedRoute , private postService : PostsService) {}


  showToggle(){
    this.postService.showToggle();
  }

}

//app.services.ts

：在使用的服务中，显示两个组件之间链接的变量

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class PostsService{

    IsShow : boolean;
    showChange: Subject<boolean> = new Subject<boolean>();

    constructor(private http: Http){
         this.IsShow = false; 
        console.log("intialization of service module");
    }   

    showToggle(){
        console.log(this.IsShow);
        this.IsShow = !this.IsShow;
        this.showChange.next(this.IsShow);
    }


}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
导入'rxjs/add/operator/map'；
从'rxjs/Subject'导入{Subject}；
@可注射（）
出口类邮政服务{
IsShow：布尔型；
showChange:Subject=新主题（）；
构造函数（专用http:http）{
this.IsShow=false；
console.log（“服务模块初始化”）；
}   
showthoggle（）{
console.log（this.IsShow）；
this.IsShow=！this.IsShow；
this.showChange.next（this.IsShow）；
}
}

正在尝试使用服务中的

IsShow

变量在“关于组件”中切换菜单

---

但这不起作用

请参考附录中给出的示例

在订阅主题之前，您必须使其可见。 所以你的服务代码应该看这行

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class PostsService {

  IsShow: boolean;
  private showChange: Subject<boolean> = new Subject<boolean>();
  showChangesObs = showChange.asObservable();
  constructor(private http: Http) {
    this.IsShow = false;
    console.log("intialization of service module");
  }

  showToggle() {
    console.log(this.IsShow);
    this.IsShow = !this.IsShow;
    this.showChange.next(this.IsShow);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http}；
导入'rxjs/add/operator/map'；
从'rxjs/Subject'导入{Subject}；
@可注射（）
出口类邮政服务{
IsShow：布尔型；
私有showChange:Subject=新主题（）；
showChangesObs=showChange.asObservable（）；
构造函数（专用http:http）{
this.IsShow=false；
console.log（“服务模块初始化”）；
}
showthoggle（）{
console.log（this.IsShow）；
this.IsShow=！this.IsShow；
this.showChange.next（this.IsShow）；
}
}

您的app.component.ts代码应该如下所示

import { Component } from '@angular/core';
import { PostsService } from './post.service'
import { post } from 'selenium-webdriver/http';

@Component({
  selector: 'app-root',
  templateUrl: '<div *ngIf="IsShow">
    < li > <a routerLink="/">Home</a></li>
      <li><a routerLink="/about/11">About</a></li>
                </div>
    <router-outlet></router-outlet>',
  providers : [PostsService]
})
export class AppComponent {
  title = 'app';
  name = 'ali';

  IsShow: boolean;

  constructor(private postService: PostsService) {
    this.IsShow = postService.IsShow;
    postService.showChangeObs.subscribe((value) => {
      this.IsShow = value;
    });

  }
}

从'@angular/core'导入{Component}；
从“/post.service”导入{PostsService}
从“SeleniumWebDriver/http”导入{post}；
@组成部分({
选择器：'应用程序根'，
templateUrl:'
家
关于
',
提供者：[售后服务]
})
导出类AppComponent{
标题=‘应用程序’；
姓名=‘阿里’；
IsShow：布尔型；
建造商（私人邮政服务：邮政服务）{
this.IsShow=postService.IsShow；
postService.showChangeObs.subscribe（（值）=>{
this.IsShow=值；
});
}
}

更新

---

从单个组件中删除

PostService

提供者注入，并将其添加到模块级。

@ChaudharyAsgharAli我已更新了我的答案。你现在能查一下吗？