想通过子使用 angular 中的服务来控制父组件（菜单 hide/show） 2

Question

我想处理菜单 (hide/show) ，它通过子组件在父组件中，按以下方式使用服务：

//app.component.ts (parent) ：在这个组件中，我使用 IsShow 变量到 hide/show 菜单；此变量 linked 到主要服务：

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：在两个组件

之间用于向 link 显示变量的服务

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

请参考angulardocs

中给出的例子

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

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 提供程序注入并将其添加到模块级别。

想通过子使用 angular 中的服务来控制父组件（菜单 hide/show） 2

want to control Parent component (menu hide/show) through child using services in angular 2

javascript

angular2-services

angular

oajax.js