J'ai Angular 4 application SPA utilisant Angular routeur. Je veux avoir un lien hypertexte qui ouvre un composant dans une nouvelle boîte de dialogue en utilisant Bootstrap = 4. Je sais déjà ouvrir une boîte de dialogue modale à partir d'une fonction.
Mais comment l'ouvrir en utilisant un lien hypertexte?
<a [routerLink]="['/login']">Login</a>
Je veux laisser mon composant actuel et juste afficher une boîte de dialogue modale devant lui.
Une autre question - est-il possible de le faire par programme? Afin que je puisse
this.router.navigate(['/login']);
et la boîte de dialogue de connexion modale s'affiche sur le composant actuel?
Aucune suggestion?
Ma meilleure supposition est que vous souhaiterez peut-être vous abonner à l'itinéraire activé et modifier les paramètres de l'itinéraire pour déclencher le modal.
import { ActivatedRoute, Params } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'cmp1',
templateUrl: './cmp1.component.html',
styleUrls: ['./cmp1.component.css'],
})
export class Cmp1 implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
if (params["modal"] == 'true') {
// Launch Modal here
}
});
}
}
Je pense que vous auriez alors un lien qui ressemblerait à quelque chose comme ceci: <a [routerLink]="['/yourroute', {modal: 'true'}]">
De meilleurs exemples peuvent être trouvés ici: Blog Route
Vous pouvez également le faire en utilisant un chemin d'accès à la place de la réponse ci-dessus qui utilise un paramètre de requête. Les deux options sont discutées en détail ici:
https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177
TL; DR :
Créez un composant factice qui ouvre simplement le modal à la création:
@Component({
template: ''
})
export class LoginEntryComponent {
constructor(public dialog: MatDialog, private router: Router,
private route: ActivatedRoute) {
this.openDialog();
}
openDialog(): void {
const dialogRef = this.dialog.open(LoginComponent);
dialogRef.afterClosed().subscribe(result => {
this.router.navigate(['../'], { relativeTo: this.route });
});
}
}
Ajoutez ensuite le composant factice à votre itinéraire:
RouterModule.forRoot([
{
path: 'home',
component: BackgroundComponentForModal,
children: [
{
path: 'dialog',
component: LoginEntryComponent
}
]
},
{ path: '**', redirectTo: 'home' }
])