Выполнение конкретного компонента после нажатия кнопки md dialog

Question

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

я говорил this code

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

На этой кнопке щелкните Я хочу выполнить конкретный компонент на основе выбора элемента. Например, если я выбираю "Heap памяти", то я хочу, чтобы выполнить "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']); 
    } 
    }); 
} 

} 

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

@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 ...."); 
} 

} 

Above 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 части, я не Не знаете, какой результат вы получите в обратном вызове.