[Angular] I made a dialog for routing
Stylez Day 18WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior JavaScript developers.
There may not be demand, but I made a dialog to route so I will keep it
What do you mean?
Normally open dialogs will not change the URL even if opened Dialogue of
angular material There is nothing like to change the dialogue It is a
story saying that when opening a dialog it will be routed when closing to make something that changes URL
For example, when issuing the login dialog , change to
http://hogehoge/→ http://hogehoge/login/.
When closed it returns to
http://hogehoge/login/→http://hogehoge/
for what?
· The back of the browser can be used when closing the dialog (Improved operability)
· Since it is being routed, it appears with the URL written directly and the dialog is displayed
· In other words, the dialog does not disappear after browser reloading
- Lazy loading can be used in the dialog!
It
is a UI close to the window system of the operating system such as OS rather than dialogue which I thought that I wanted to create an application that has contents of regular page of regular site in the dialog and would like to create an application that will overlap even more. In
that case, I started thinking that sex might improve
Creating a dialog display component
As in the example given earlier, when opening it will transition one level down on the URL, and when closing it will make it with the specification that transitions one level upwards All
dialogs will use the one of my favorite angular material
dialog.component.ts
export enum ModalSize {
large ,
medium ,
small
}
export in interface DialogOption {
size : ModalSize ;
}
@ Component ({
selector : 'app-dialog' ,
templateUrl : './dialog.component.html' ,
styleUrls : [ '. / Dialog.component.scss' ]
})
export class DialogComponent implements OnInit , OnDestroy {
Private RouterUrl : String ;
Private DialogRef : MatDialogRef < Any , Any > ;
constructor ( private overlay : Overlay , private route : ActivatedRoute , private router : Router , private dialog : MatDialog ) {
}
NgOnInit () {
this . route . data . subscribe ( data => {
this . OpenModal ( data . DialogComponent , data . DialogOption );
});
}
ngOnDestroy () {
this . dialogRef . close ();
}
OpenModal ( DialogComponent : ComponentType < any > , DialogOption : DialogOption ) {
this . RouterUrl = this . : router . url ;
this . DialogRef = this . dialog . open ( DialogComponent , {
width : this . DialogSizeToPixel ( DialogOption . size ),
CloseOnNavigation : false ,
AUTOFOCUS : true ,
ScrollStrategy : this . overlay . ScrollStrategies . block ()
});
this . DialogRef . beforeClose (.) subscribe ( _ => {
this . CloseAndReturnRoute ();
});
}
private DialogSizeToPixel ( ModalSize : ModalSize ): string {
: switch ( ModalSize ) {
Case ModalSize . large :
return '1024px' ;
Case ModalSize . medium :
return '800px' ;
default :
return '640px' ;
}
}
Private CloseAndReturnRoute () {
Const RouterPath = This . Router . Url ;
// first when to open and different does not do anything in the case of Url
// mainly the case Url is changed by the routing
If ( This . RouterUrl ! == RouterPath ) {
return ;
}
this . DialogRef . close the ();
// Https://Github.Com/angular/angular/issues/17957
// since unavoidable erase the last slash following own
const ParentRoutePath = RouterPath . substr ( 0, RouterPath . LastIndexOf ( '/' ));
this . : Router . Navigate ([ ParentRoutePath ], { relativeTo : this . Route });
}
}
dialog.component.html
Commentary
NgOnInit () {
this . route . data . subscribe ( data => {
this . OpenModal ( data . DialogComponent , data . DialogOption );
});
}
When the component is created with ngOnInit, it displays the type of dialog to be displayed from the routing parameters
closeOnNavigation : false ,
By default, the dialog of angular material will close when the history of the browser changes. When
this behavior happens, the dialog will disappear as soon as routing disappears and it will not be displayed
. It will be invalidated by setting closeOnNavigation to false
If ( This . RouterUrl ! == RouterPath ) {
Return ;
}
There are two patterns to close this dialog.
One is when the close button is pressed, backdrop is clicked etc. In
this case, it is necessary to make one hierarchy of the URL upward. The
other is This is the case when the routing is changed (goes through ngOnDestroy) In
this case you do not need to change the URL because the URL has already been changed
. Compare whether the URL at the time of opening these two patterns is the same as the current URL I will judge it
const ParentRoutePath = RouterPath . substr ( 0 , RouterPath . lastIndexOf ( '/' ));
this . : router . navigate ([ ParentRoutePath ], { relativeTo : this . route });
When using lazy loading it seems that relative path can not be used.
Move to the previous routing by erasing / at the end of the URL
dialog.component.html
Make a new router-outlet for opening more than two dialogs
How to use
{
Path : 'setting' ,
component : DialogComponent ,
data : { DialogComponent : SettingComponent , DialogOption : { size : ModalSize . Large }},
children : [{
path : 'image-upload' ,
component : DialogComponent ,
data : { DialogComponent : ImageUploadComponent , dialogOption : { size: ModalSize . Small }},
}]
}
dialogComponentSpecify the components of the dialog to open with the routing parameters
The finished product
Close with browser back
The dialog still remains even after reloading
Operation becomes pleasant if 5 button mouse or smartphone
WEB · Business system, infrastructure construction · operation monitoring, wide development history and experienced engineer's own development system, we are developing system of speedy and high quality. We offer comprehensive IT services such as AWS and various clouds and vendor partners, migration using original migration tool, serverless system construction, DevOps consulting using containers, and so on.