单击 md 对话框按钮后执行特定组件
Execute particular component after click on md dialog button
我在页面的左侧面板上有 8 个图表图像。当我将这些图像拖放到右侧面板时,我会显示 MD 对话框。在 md 对话框中,我在下拉菜单中显示列表。
我提到了
从下拉列表中选择 select 项后,我单击 md 对话框的 "Yes" 按钮。
在此按钮上单击我要执行基于项目 selection 的特定组件。例如,如果我 select "Heap Memory" 那么我想执行 "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);
左面板组件
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']);
}
});
}
}
单击 "Yes" 后,我想根据项目 selection 执行以下组件。
@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 响应,上面的这个组件将有服务。我将有多个组件,如上所示。
我不知道如何像上面的特定组件那样执行?
请给我解决方案
如果您想在对话框结果后导航到特定组件,您可以这样做:
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
部分是我补的,不知道你回调的结果是什么
我在页面的左侧面板上有 8 个图表图像。当我将这些图像拖放到右侧面板时,我会显示 MD 对话框。在 md 对话框中,我在下拉菜单中显示列表。
我提到了
从下拉列表中选择 select 项后,我单击 md 对话框的 "Yes" 按钮。
在此按钮上单击我要执行基于项目 selection 的特定组件。例如,如果我 select "Heap Memory" 那么我想执行 "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);
左面板组件
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']);
}
});
}
}
单击 "Yes" 后,我想根据项目 selection 执行以下组件。
@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 响应,上面的这个组件将有服务。我将有多个组件,如上所示。
我不知道如何像上面的特定组件那样执行? 请给我解决方案
如果您想在对话框结果后导航到特定组件,您可以这样做:
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
部分是我补的,不知道你回调的结果是什么