如何解决带“路径”选项卡的“角材料路径”对话框
首先,我的StackBlitz包含了我要解决的确切情况。
就像标题所示,我有一个路由对话框(根据路由打开的对话框),并且在此对话框中我想有一个选项卡控件。每个选项卡也应绑定到一条路线,所以我认为我的对话框也应该以某种方式得到一个<router-outlet/>
但是当我添加没有名称参数的额外<router-outlet/>
时,渲染(我认为)变得疯狂->结果:应用程序无响应。
当我添加name参数并配置路由时,它也不起作用。
const routes: Routes = [
{path: '',redirectTo: '/home',pathMatch: 'full'},{path: 'home',component: HomeComponent,children: [
{path: 'dialog',component: DialogWrapperComponent},{path: 'routed-dialog',children: [
{path: '',component: RoutedDialogWrapperComponent},{path: 'first',component: FirstComponent
//,outlet:'test' // Adding this does not work
}
]
}
]},]
所以RoutedDialogWrapperComponent
看起来像这样:
import { Component } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { RoutedDialogComponent } from "./routed-dialog.component";
import { Router,ActivatedRoute } from "@angular/router";
@Component({
template:''
})
export class RoutedDialogWrapperComponent{
constructor(private dialog:MatDialog,private router:Router,private route: ActivatedRoute){
this.openDialog();
}
private openDialog(){
let dialog = this.dialog.open(RoutedDialogComponent);
dialog.afterClosed().subscribe(result => {
this.router.navigate(['../'],{
relativeTo: this.route
});
});
}
}
和RoutedDialogComponent
的HTML如下:
<nav mat-tab-nav-bar>
<a mat-tab-link routerLink="/home/dialog2/first">First</a>
<a mat-tab-link>Second</a>
<a mat-tab-link>Third</a>
</nav>
<!-- without name it rendering goes wild and will hang -->
<router-outlet name='test'></router-outlet>
<!-- this router-outlet does not work ... -->
<!--
<router-outlet></router-outlet>
-->
最后,我想输入一个网址,例如:'/ home / routed-dialog / first'和 inside 对话框,在选项卡导航下,我想看到{{1 }},但我不知道如何...
我有足够的信心要解决其他情况,例如激活正确的选项卡,但是在此情况下,我需要一些帮助,因为我的Angular知识(如其语一样)非常有限:-)
解决方法
您可以在'router-outlet' in MatDialog is not working in Angular 7
中找到带有命名路由器出口的解决方案但是,如果您确实希望拥有干净的链接而没有/routed-dialog(popupContent:first)
这样的奇怪构造,则可以执行以下技巧:
-
将所有选项卡式组件定义为
RoutedDialogWrapperComponent
的子代:{ path: "routed-dialog",component: RoutedDialogWrapperComponent,children: [ { path: "first",component: FirstComponent },{ path: "second",component: SecondComponent },{ path: "third",component: ThirdComponent },{ path: '**',redirectTo: 'first' } ],}
-
将
<router-outlet>
放入RoutedDialogWrapperComponent
的模板中,并用<ng-template>
包裹<ng-template> <router-outlet></router-outlet> </ng-template>
-
在组件类中获取对该包装的引用:
export class RoutedDialogWrapperComponent { @ViewChild(TemplateRef,{ static: true }) templateRef: TemplateRef<any>;
-
将该引用传递给
RoutedDialogComponent
:export class RoutedDialogWrapperComponent implement OnInit { ngOnInit() { this.openDialog(); } private openDialog() { const dialog = this.dialog.open(RoutedDialogComponent); dialog.componentInstance.contentTemplate = this.templateRef; ... } }
-
最后,将其渲染到
RoutedDialogComponent
内:<nav mat-tab-nav-bar> <a mat-tab-link routerLink="home/routed-dialog/first">First</a> <a mat-tab-link routerLink="home/routed-dialog/second">Second</a> <a mat-tab-link routerLink="home/routed-dialog/third">Third</a> </nav> <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。