在切换上重新渲染组件

Question

我有一个＆＃34;导航栏＆＃34;有一个开关的组件，每次切换我想重新更新我的＆＃34; home＆＃34;零件。更新需要在navbar.comp.ts

中的onChange（）函数中进行

navbar.comp.ts

    import { Component, OnInit, Injectable } from '@angular/core';
    import { Router } from '@angular/router';
    import { AreaService} from '../_services/index';

    @Injectable()
    @Component({
      selector: 'app-nav-bar',
        templateUrl: 'navBar.component.html'
    })

    export class NavBarComponent implements OnInit {
        routeLinks: any[];
        activeLinkIndex = 2;
        color = 'warn';
        checked: boolean;

        constructor(private router: Router,
        private areaService: AreaService) {
          this.routeLinks = [
          {label: 'Profile', link: '/profile/', index: '0'},
          {label: 'Notification', link: '/notifications/', index: '1'},
          {label: 'Home', link: '', index: '2'},
          {label: 'My Cards', link: '/cards/', index: '3'},
          {label: 'Create a Card', link: '/post/', index: '4'},
          {label: 'Logout', link: '/login/', index: '5'},
        ];
        }
        onChange(value) {

           if (value.checked === true) {
             this.areaService.currentArea = 1;
           } else {
             this.areaService.currentArea = 0;
           }
        }
        ngOnInit() {
        }
    }

然后我想在home.comp.ts

中重新运行ONOnInit

    import { Component, OnInit, Injectable } from '@angular/core';
    import { Response } from '@angular/http';
    import { FormsModule } from '@angular/forms';
    import { Post, Area } from '../_models/index';
    import { PostService, AreaService, HttpService} from '../_services/index';


    @Injectable()
    @Component({
        templateUrl: 'home.component.html',
    })

    export class HomeComponent implements OnInit {
      posts: Post[] = [];
      areas: Area[] = [];
      model: any = {};

      constructor(
      private postService: PostService,
      private areaService: AreaService,
      private httpService: HttpService) { }

      ngOnInit() {
            // get posts from secure api end point
            this.postService.getPosts()
                .subscribe(post => {
                    this.posts =  post;
                });
                this.areaService.getAreas()
                .subscribe(area => {
                  this.areas = area;
                });
        }

      upSwipe() {
        // Increase post spread
        this.httpService.POST('/areas/' + this.areas[this.areaService.currentArea].name  +
        '/' + this.posts[0].id + '/spread/1/', JSON.stringify({}))
          .subscribe(
              data => console.log('Burning more wood'));
              this.ngOnInit();
            }

      downSwipe() {
          // Increase post spread
          this.httpService.POST('/areas/' + this.areas[this.areaService.currentArea].name  +
          '/' + this.posts[0].id + '/spread/0/', JSON.stringify({}))
          .subscribe(
              data => console.log('The air seemingly grew colder'));
              this.ngOnInit();
            }

      fun() {
        this.areaService.currentArea = 0;
        this.areaService.currentAreaName = 'fun';
        this.ngOnInit();
      }

      information() {
        this.areaService.currentArea = 1;
        this.areaService.currentAreaName = 'information';
        this.ngOnInit();
      }

      postComment() {
        const text = {
        'text': this.model.comment
    };
        const body = JSON.stringify(text);
        this.httpService.POST('/areas/' + this.areaService.currentAreaName  + '/' + this.posts[0].id + '/', body)
          .subscribe(
              data => console.log('Someone said something in the forest, but did anyone hear it?'));
              this.model.comment = '';
              this.ngOnInit();

      }
    }

我该怎么做？

编辑添加了post.service.ts

    import { Injectable } from '@angular/core';
    import { Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/mergeMap';
    import { AreaService, HttpService} from './index';
    import { Post, Area} from '../_models/index';

    @Injectable()
    export class PostService {
      areas: Area[] = [];
        constructor(
            private areaService: AreaService,
            private httpService: HttpService
          ) { }

        getPosts(): Observable<Post[]> {
            // subscribe until the area is available
            return this.areaService.getAreas().mergeMap(area => {
                // use the area to get the response
                return this.httpService.GET('/areas/' + area[this.areaService.currentArea].name + '/')
                    .map((response: Response) => response.json());
            });
        }
        getFunPosts(): Observable<Post[]> {
          return this.httpService.GET('/areas/fun/own/' )
              .map((response: Response) => response.json());
        }
        getInformationPosts(): Observable<Post[]> {
          return this.httpService.GET('/areas/information/own/' )
              .map((response: Response) => response.json());
        }
    }