在仪表板angular4

Question

我是Angular 4的新手，几周以来我一直在从事一个项目。

我的要求是在我想要加载的ng2-select框中选择一个选项 仪表板中的单独组件。

我创建了两个组件来根据选择框中的选项加载内容。

第一个值0或第一个选项文本应显示为默认值。

当我在选择中更改选项时，我希望将两个组件加载到它们各自的组件中。

menu.component.html
            <ng-select (change)="onChangeSelect($event)" [allowClear]="true"
                  [items]="items"
                  [disabled]="disabled"
                  (data)="refreshValue($event)"
                  (selected)="selected($event)"
                  (removed)="removed($event)"
                  (typed)="typed($event)"
                  placeholder="Select">
            </ng-select>

menu.component.ts

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery/dist/jquery.min.js';
import {SelectModule} from 'ng2-select';
import { Router} from '@angular/router';
import { ActivatedRoute } from '@angular/router';

declare var jQuery:any;

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css'],
})

export class MenuComponent implements OnInit {
    onchangeOption:string = '';

    public items:Array<string> = ['Program Summary', 'Portfolio Summary']

                                private value:any = {};
                                private _disabledV:string = '0';
                                private disabled:boolean = false;

                                private get disabledV():string {
                                  return this._disabledV;
                                }
                                private set disabledV(value:string) {
                                  this._disabledV = value;
                                  this.disabled = this._disabledV === '1';
                                }

                                public selected(value:any):void {
                                  console.log('Selected value is: ', value);
                                }

                                public removed(value:any):void {
                                  console.log('Removed value is: ', value);
                                }

                                public typed(value:any):void {
                                  console.log('New search input: ', value);
                                }

                                public refreshValue(value:any):void {
                                  this.value = value;
                                }

                                showHide: boolean;
  constructor(private route: ActivatedRoute, private router:Router) {

  }

  ngOnInit() {
  }

  showHideMenu(){
      this.showHide = !this.showHide;
  }

  HideMenu(){
      this.showHide = false;
      console.log("out")
  }
  onChangeSelect(event){
      this.onchangeOption = event.target.value;
      console.log(event);
      if(this.onchangeOption == 'Portfolio Summary'){
          this.router.navigate(['programs']);
      }else{
          this.router.navigate(['summaries']);
      }
  }
}

app.module.ts
    {
        path: 'dashboard',
        component: DashboardComponent,
        children: [
            { path: '', redirectTo: 'programs', pathMatch: 'full' },
            { path: ':id', component: ProgramsComponent },
            /*{ path: 'id', component:ChartsComponent }*/
            { path: 'dashboard/summaries', component:SummariesComponent }

        ]
    }