MatDialog中的“‘router outlet”在Angular 7中不起作用

import { Component } from '@angular/core';

@Component({
  selector: 'app-dialog',
  template: `
    <router-outlet></router-outlet>
  `,
})
export class DialogComponent {}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DialogComponent } from './dialog.component';

const routes: Routes = [
  {
    path: '',
    component: DialogComponent,
    children: [
      // 定义需要显示的路由组件
      // 示例路由组件为HomeComponent
      { path: '', component: HomeComponent },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class DialogRoutingModule {}

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="openDialog()">Open Dialog</button>
  `,
})
export class ExampleComponent {
  constructor(private dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogComponent, {
      width: '500px',
      height: '300px',
    });
  }
}