javascript - 想要通过使用 Angular 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:在服务中使用显示变量来链接两个组件

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

请引用 Angular 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 提供程序注入(inject)并将其添加到模块级别。