想要通过使用角度2中的服务的子项来控制父组件（菜单隐藏/显示）

Question

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

//app.component.ts (parent)：在这个组件中我使用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; 
    });

  }


}

//about.component.ts (child)：在这里我使用showToggle使用服务在父组件中切换IsShow变量的值：

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：在服务中使用show变量来链接两个组件

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


}

尝试在服务中使用IsShow变量切换关于组件的菜单，但这不起作用。

Answer 1

请参考角度docs中给出的示例

在订阅主题之前，您必须使其可观察。所以你的服务代码应该看起来像这样。

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

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

  }
}

更新

从单个组件中删除PostService Provider注入并将其添加到模块级别。