带“路径”选项卡的“角材料路径”对话框

问题描述

首先，我的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>
  

Forked Stackblitz