带有路由选项卡的 Angular Material Routed 对话框

Question

首先：我的StackBlitz包含我正在尝试解决的确切案例。

就像标题说我有一个路由对话框（根据路由打开的对话框），在这个对话框中我想要一个选项卡控件。每个选项卡也应该绑定到一个路由，所以我认为我的对话框也应该以某种方式得到一个<router-outlet/>

但是当我在<router-outlet/>没有 name 参数的情况下添加这个额外的东西时，渲染（我认为）会变得疯狂 - > 结果：无响应的应用程序。

当我添加 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
        });
    });
  }
}

和这样的 HTML RoutedDialogComponent：

<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>
-->

最后，我想要一个 url，如：'/home/routed-dialog/first' 并在对话框内的 tab-nav 下，我想查看FirstComponent但我不知道如何...

其他情况，例如“激活”正确的选项卡是我有足够信心解决的问题，但在这一点上，我需要一些帮助，因为我的 Angular 知识（与其俚语一样）非常有限:-)

Answer 1

您可以在此处找到带有命名路由器插座的解决方案MatDialog 中的“路由器插座”在 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>
  

分叉的堆栈闪电战