Выполнить определенный компонент после нажатия на кнопку диалога MD

Question

У меня есть 8 графических изображений на левой боковой панели страницы. Когда я перетаскиваю эти изображения и падаю на правую боковую панель, я отображаю диалоговое окно MD. В диалоговом окне md я показываю список в выпадающем меню.

Я сослался на этот код

После выбора элемента из выпадающего списка я нажимаю кнопку "Да" в диалоговом окне md.

При нажатии этой кнопки я хочу выполнить определенный компонент на основе выбора элемента. Например, если я выбрал "Память кучи", я хочу выполнить "HeapMemoryComponent" и т. Д.

routing.ts

import  {ModuleWithProviders} from '@angular/core';
import {Routes,RouterModule} from '@angular/router';

import {AppComponent} from './app.component';
import {HeapMemoryComponent} from './aem-down-time-graph/aem-down-time-graph.component'
const appRoutes:Routes = [
{
 path: 'abc',
 component: HeapMemoryComponent
}
];
export const routing:ModuleWithProviders = RouterModule.forRoot(appRoutes);

LeftPanelComponent

import { Component, OnInit } from '@angular/core';
import {LeftpanelService} from "../leftpanel.service"
import {Leftpanel} from "../leftpanel";
import {MdDialog} from "@angular/material";
import {MdDialogRef} from "@angular/material";
import { Routes, RouterModule } from '@angular/router';
import {ServersListDialogComponent} from "../servers-list-dialog/servers-list-dialog.component";
@Component({
selector: 'app-leftpanel',
templateUrl: './leftpanel.component.html',
styleUrls: ['./leftpanel.component.css']
})
export class LeftpanelComponent implements OnInit {
 dialogRef: MdDialogRef<ServersListDialogComponent>;
 leftpanels:Leftpanel[];
 receivedData:Array<any> = [];

 constructor(
   public dialog: MdDialog,private service:LeftpanelService,public router:Router
 ) { }

 ngOnInit() {
   this.service.getLeftpanels().subscribe(lst =>this.leftpanels=lst);
 }

 transferDataSuccess($event) {
 this.receivedData.push($event.dragData);
 this.openDialog();
 }
 openDialog() {
  this.dialogRef = this.dialog.open(ServersListDialogComponent, {
    disableClose: false
  });

  this.dialogRef.afterClosed().subscribe(result => {
    console.log('result: ' + result);
    this.dialogRef = null;
    if(result.componentName == "HeapMemoryComponent"){
      this.router.navigate(['HeapMemoryComponent']);
    }
  });
 }

}

После нажатия "Да" я хочу выполнить, как следующий компонент на основе выбора элемента.

@Component({
 selector: 'app-mainpanel',
 templateUrl: './heap-memory.component.html',
 styleUrls: ['heap-memory.component.css']
})
export class  HeapMemoryComponent implements OnInit {
constructor() {
 console.log("HeapMemoryComponent object is created...");
}

ngOnInit() {
 console.log("HeapMemoryComponent ....");
}

}

Выше HeapMemoryComponent есть ответ html, и у этого компонента будет служба. И у меня будет несколько компонентов, как указано выше.

Я не понял, как выполнить, как выше определенного компонента? Пожалуйста, дайте мне решение

Answer 1

Если вы хотите перейти к определенному компоненту после результата диалога, вы можете сделать что-то вроде этого:

import {Router} from "@angular/router";
...
constructor(public router:Router..){}

this.dialogRef.afterClosed().subscribe(result => {
    console.log('result: ' + result);
    this.dialogRef = null;
    //based on result
    if(result.componentName == "HeapMemoryComponent"){
      this.router.navigate(['abc']);
    }
  });

Обратите внимание, что я составил result.componentName часть, я не знаю, какой результат вы получите в обратном вызове.