Question

我在页面的左侧面板上有8个图形图像。当我拖动这些图像并放在右侧面板上时，我将显示MD对话框。在md对话框中，我在下拉菜单中显示列表。

从下拉列表中选择项目后，我点击＆＃34;是＆＃34; md对话框的按钮。

在此按钮上单击我想根据项目选择执行特定组件。例如，如果我选择＆＃34;堆内存＆＃34;然后我想执行＆＃34; HeapMemoryComponent＆＃34;等等。

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']);
    }
  });
 }

}

点击＆＃34;是＆＃34;我想基于项目选择执行类似下面的组件。

@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

如果要在对话框结果后导航到特定组件，可以执行以下操作：

<script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>

 <title>Filter Table</title>


<body>
<div class="optionsDiv">
    Filter By Position
    <select id="selectField">
        <option value="All" selected>All</option>
        <option value="Student">Student</option>
        <option value="Assistant">Assistant</option>
        <option value="Professor">Professor</option>
     <br> <input type="text" id="myInput" placeholder="Search">

    </select>
   
</div>
<table id="myTable">
    <tr id="HeadRow">
        <td>First Name</td>
        <td>Last Name</td>
        <td>Age</td>
        <td>Position</td>
    </tr>

    <tr position="Student">
        <td>John</td>
        <td>John's Last name</td>
        <td>25</td>
        <td>Student</td>
    </tr>

    <tr position="Assistant">
        <td>Timmy</td>
        <td>Timmy's Last name</td>
        <td>22</td>
        <td>Assistant</td>
    </tr>

    <tr position="Professor">
        <td>Billy</td>
        <td>Billy's Last name</td>
        <td>40</td>
        <td>Professor</td>
    </tr>

    <tr position="Professor">
        <td>Eddy</td>
        <td>Eddy's Last name</td>
        <td>35</td>
        <td>Professor</td>
    </tr>

    <tr position="Professor">
        <td>Emma</td>
        <td>Emma's Last name</td>
        <td>38</td>
        <td>Professor</td>
    </tr>

    <tr position="Student">
        <td>Emily</td>
        <td>Emily's Last name</td>
        <td>20</td>
        <td>Student</td>
    </tr>

    <tr position="Assistant">
        <td>Jack</td>
        <td>Jack's Last name</td>
        <td>30</td>
        <td>Assistant</td>
    </tr>

    <tr position="Student">
        <td>Robert</td>
        <td>Robert's Last name</td>
        <td>20</td>
        <td>Student</td>
    </tr>

    <tr position="Assistant">
        <td>Danny</td>
        <td>Danny's Last name</td>
        <td>37</td>
        <td>Assistant</td>
    </tr>

    <tr position="Professor">
        <td>Erick</td>
        <td>Erick's Last name</td>
        <td>42</td>
        <td>Professor</td>
    </tr>
</table>

</body>

请注意，我已经组成了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']); } });部分，我不知道你在回调中得到了什么结果。

单击md对话框按钮

1 个答案: