我想让人们在我的网络应用程序中填写一个查询表格，该表格在模态对话框中打开。首先，我希望人们阅读关于我将要提出的询问的免责声明。
我想在Angular 4中通过路由选择Material对话框，但是如何为对话框设置单独的路由？这甚至可能吗？我想到了一种向导结构，你可以在其中阅读一个页面，该页面由一个组件定义，然后你点击下一步＆＃39;并转到下一个组件，直到你到达结束并退出向导？所有这些时间，主要的网络应用程序都无法与之交互。
我的对话框组件的HTML是：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="535px" height="906.5px" viewBox="0 0 535 906.5" enable-background="new 0 0 535 906.5" xml:space="preserve">
<g>
<path fill="#5BC8AF" d="M534.5,888.5v-876c0-6.627-5.373-12-12-12h-511C6.06,0.5,1.472,4.123,0,9.085
c-0.321,1.083-0.5,2.228-0.5,3.415v876c0,1.188,0.179,2.331,0.5,3.414c1.15,3.88,4.206,6.936,8.085,8.086
c1.083,0.321,2.228,0.5,3.415,0.5h511c1.188,0,2.331-0.179,3.414-0.5C530.877,898.528,534.5,893.939,534.5,888.5z"/>
</g>
<g>
<g>
<polygon fill="#67327A" points="85.333,709 99.333,694.334 98,676.334 80,679.667 46,672.334 0,706.333 0,798.334 43.333,763
"/>
<polygon fill="#67327A" points="528,649.667 502,647 484.667,664.334 487.333,679.667 476.667,675.667 466.667,681.667
455.333,673 434.667,671.667 427.333,695.667 430.667,709 419.333,731 436.667,755 388,787.667 390,776.334 387.333,759.667
374,756.334 359.333,765.667 350.667,747.667 337.333,749 324,676.334 309.333,666.334 292.667,674.334 293.333,693.667
288.667,719 286,702.334 273.333,693.667 263.333,695 249.333,712.334 248.666,748.334 229.333,729.667 212,727.667 193.333,755
196.666,786.334 189.333,779 162.666,768.334 149.333,787 148,807.667 140,802.334 127.333,808.334 118,801 97.333,798.334
88.667,815 98,837 86,837.667 82,859.667 76.667,861 60.667,837 44,840.334 40,829 35.333,825.667 46,815 42,797.667
23.333,789.667 0,798.334 0,878 0,888 0,907.5 535,907.5 535,888 535,878 535,658.334 "/>
</g>
<polygon fill="#67327A" points="0,0 0,13 0,29.5 0,130 7,123 9.5,85 17.5,98 34,106.5 51.5,83 54.5,68.5 61,74.5 70.5,66.5
89.5,76.5 79.5,78.5 81,97 99.5,108.5 118.5,98.5 82.5,133 57,163 38,185 43.5,217 78,223 153,175 158,193.5 178,198.5 189,189.5
195.5,207.5 207,210 219.5,278.5 236,287 254,279.5 256,244.5 274.5,262.5 288,258.5 300,234.5 300,202 318.5,227 330.5,230
350,204.5 353,170.5 359,179.5 385,182.5 400,164.5 398,146.5 409.5,154 420.5,147 429.5,153.5 452,155.5 459,132.5 456,118.5
467.5,97 451,74 497.5,40.5 494.5,51.5 496.5,68 512.5,72.5 527.5,62 535,80 535,29.5 535,13 535,0 "/>
</g>
<g class="next-button">
<rect x="403" y="789" fill="#67327A" width="125" height="99"/>
<text transform="matrix(1 0 0 1 413 821)" fill="#5BC8AF" font-family="'Bungee-Regular'" font-size="36">next</text>
<polygon fill="#5BC8AF" points="484,839.5 484,852 415,852 415,852.626 415,863.374 415,865 484,865 484,876.5 484,881.908
508.75,858.18 508.64,858 508.688,857.82 484,834.092 "/>
</g>
<text transform="matrix(1 0 0 1 20 386.7002)" fill="#67327A" font-family="'Bungee-Regular'" font-size="34">I will not work for free</text>
</svg>
对话框组件的用法如下：
import { Component } from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';
import { CommissionMeDialogComponent } from '../commission-me-dialog/commission-me-dialog.component';
@Component({
selector: 'app-commission-me',
templateUrl: './commission-me.component.html',
styleUrls: ['./commission-me.component.css']
})
export class CommissionMeComponent {
selectedOption: string;
constructor(public dialog: MdDialog) {}
openDialog() {
let dialogRef = this.dialog.open(CommissionMeDialogComponent);
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
}
}
答案 0 :(得分：0)
您可以像这样设置app.component.html：
<router-outlet></router-outlet>
没有标题，菜单，页脚或其他任何内容。这样，用户无法选择任何内容，必须专注于当前显示的组件。如果你这样做，那么你在技术上并不需要它作为一个模态对话框。
然后你会添加一个这样的shell组件：
<pm-menu></pm-menu>
<div class='container'>
<router-outlet></router-outlet>
</div>
然后你可以路由你的＆＃34; main＆＃34;应用程序页面到此<router-outlet>，因此他们将拥有每个页面上的菜单，页眉，页脚或其他任何内容。
路线看起来像这样：
RouterModule.forRoot([
{
path: 'wizard',
component: WizardComponent,
children: [
{ path: 'page1', component: Page1Component },
{ path: 'page2', component: Page2Component },
]
},
{
path: '',
component: ShellComponent,
children: [
{ path: 'welcome', component: WelcomeComponent },
{ path: 'customers', component: CustomerComponent},
{ path: '', redirectTo: 'welcome', pathMatch: 'full' },
]
},
{ path: '**', component: PageNotFoundComponent }
])
答案 1 :(得分：0)
此处讨论了一些策略（请参见“按路径路由”选项）：
https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177
TL; DR ：
您可以通过创建一个仅在初始化时打开模态的虚拟组件来实现：
@Component({
template: ''
})
export class DialogEntryComponent {
constructor(public dialog: MatDialog, private router: Router,
private route: ActivatedRoute) {
this.openDialog();
}
openDialog(): void {
const dialogRef = this.dialog.open(CommissionMeDialogComponent);
dialogRef.afterClosed().subscribe(result => {
this.router.navigate(['../'], { relativeTo: this.route });
});
}
}
然后将虚拟组件添加到您的路线：
RouterModule.forRoot([
{
path: 'home',
component: DialogOverviewExample,
children: [
{
path: 'dialog',
component: DialogEntryComponent
}
]
}
])
答案 2 :(得分：0)
这是一个很好的解释https://www.youtube.com/watch?v=Sk5jOAGl20o
他做了什么：
str(overall_months[-1]).replace('[', '').replace(']','')
@Component({
template: ''
})
export class XyzComponent implements OnInit {
currentDialog:MatDialogRef<any>=null;
constructor( private _dialog: MatDialog,private _router:Router,private
_arouter:ActivatedRoute
) {
if(this.currentDialog){
this.currentDialog.close();
}
this.currentDialog=this._dialog.open(**DialogComponent**);
this.currentDialog.afterClosed().subscribe(res=>{
console.log('Hello Man');
});
}