如何使用"Angular 4 Material"对话框实现布管

Question

我想让人们在我的web应用程序上填写一份在模式对话框中打开的查询表。首先，我想让人们阅读一份关于我将要回答的问题的免责声明。

我想在Angular 4中通过路由使用"材质"对话框来实现这一点，但如何为对话框设置单独的路由？这可能吗？我在想一种向导结构，你阅读一个由一个组件定义的页面，然后点击"下一个"并转到下一个组件，直到你到达最后，它退出向导？一直以来，主web应用程序都需要不可用以进行交互。

我的对话框组件的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>

对话框组件的ts如下：

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

Answer 1

这里讨论了一些策略(请参阅"按路径路由"选项(：

https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177

TL；DR:

您可以通过创建一个伪组件来实现这一点，该组件只在init:上打开模态

@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
}
]
}
])

Answer 2

你可以这样设置你的app.component.html：

<router-outlet></router-outlet>

没有页眉、菜单、页脚或其他任何内容。这样，用户就不能选择任何内容，必须将注意力集中在当前显示的组件上。如果你这样做，那么从技术上讲，你就不需要它是一个模态对话框。

然后，您可以添加一个类似于以下内容的shell组件：

<pm-menu></pm-menu>
<div class='container'>
<router-outlet></router-outlet>
</div>

然后，您可以将您的"主"应用程序页面路由到此<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 }
])

Answer 3

这里有一个非常好的解释https://www.youtube.com/watch?v=Sk5jOAGl20o

他做了什么：

1. 制作一个xyz.component.ts文件，而不包含像这样的HTML、CSS部分，并声明它并添加到入口组件(check(

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

2. 将任何路线添加到您的路线

{
path: 'To Dialog',
component: XyzComponent,    
},

3. 注意，您可以像以前一样定义对话框参数，如数据、高度、宽度等。看看代码，它们是相似的