typescript Angular 4 路由器和模态对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44595756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 router and modal dialog
提问by Sergey
I have Angular 4 SPA application using Angular router. I want to have hyperlink that opens a component in new dialog using Bootstrap 4. I already know how to open modal dialog from a function.
我有使用 Angular 路由器的 Angular 4 SPA 应用程序。我想要使用 Bootstrap 4 在新对话框中打开组件的超链接。我已经知道如何从函数中打开模态对话框。
But how to open it using hyperlink?
但是如何使用超链接打开它呢？
<a [routerLink]="['/login']">Login</a>
I want to leave my current component in and just show modal dialog in front of it.
我想保留我当前的组件并在它前面显示模态对话框。
Another question - is it possible to do that programatically? So that I can
另一个问题 - 是否可以以编程方式做到这一点？这样我就可以
this.router.navigate(['/login']);
and login modal dialog is displayed over current component?
并且登录模式对话框显示在当前组件上？
Any suggestions?
有什么建议？
回答by birwin
My best guess is you may want to subscribe to the activated route and change params in the route to trigger the 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
}
});
}
}
I believe you would then have a link that looked something like this:
<a [routerLink]="['/yourroute', {modal: 'true'}]">
我相信你会有一个看起来像这样的链接：
<a [routerLink]="['/yourroute', {modal: 'true'}]">
Better examples might be found here: Route Blog
更好的例子可以在这里找到：Route Blog
回答by John Crowson
You could also do it using a path instead the above answer which uses a query parameter. Both options are discussed in detail here:
您也可以使用路径来代替上述使用查询参数的答案。此处详细讨论了这两个选项：
https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177
https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177
TL;DR:
特尔；博士：
Create a dummy component that just opens the modal on creation:
创建一个在创建时只打开模态的虚拟组件：
@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 });
});
}
}
Then add the dummy component to your route:
然后将虚拟组件添加到您的路线中：
RouterModule.forRoot([
{
path: 'home',
component: BackgroundComponentForModal,
children: [
{
path: 'dialog',
component: LoginEntryComponent
}
]
},
{ path: '**', redirectTo: 'home' }
])
])
