mdDialog 中的 angular2 路由

Question

我正在尝试在 mdDialog 中进行路由， 这是 pnlkr: https://plnkr.co/edit/iTtq3HtDim0OsnJPKmW2?p=preview

我创建了两个对话框，例如，当我单击哪些照片时，它应该在同一对话框中打开用户的照片。

module.ts:

 import { RouterModule, Routes } from '@angular/router';
    const appRoutes: Routes = [
      { path: '', component: DialogOverviewExample },
      {
    path: 'photos',
    component: DialogOver,
  },

  { path: '**', component: DialogOverviewExample }
];

其中“照片”是包含照片的对话框。

在第一个对话框中，我将 routerLink 设置为名为“whatch photos”的按钮:

<div md-dialog-actions>
  <button md-button routerLink="/photos"  tabindex="2">Watch Photos</button>
  <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

它应该打开第二个带有照片的对话框，但它没有...... 并且出现错误:

ERROR Error: No provider for Router!

整个模块.ts

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy';
import {
  MdAutocompleteModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdCardModule,
  MdCheckboxModule,
  MdChipsModule,
  MdDatepickerModule,
  MdDialogModule,
  MdExpansionModule,
  MdGridListModule,
  MdIconModule,
  MdInputModule,
  MdListModule,
  MdMenuModule,
  MdNativeDateModule,
  MdPaginatorModule,
  MdProgressBarModule,
  MdProgressSpinnerModule,
  MdRadioModule,
  MdRippleModule,
  MdSelectModule,
  MdSidenavModule,
  MdSliderModule,
  MdSlideToggleModule,
  MdSnackBarModule,
  MdSortModule,
  MdTableModule,
  MdTabsModule,
  MdToolbarModule,
  MdTooltipModule,
  MdStepperModule,
} from '@angular/material';
import {DialogOverviewExample, DialogOverviewExampleDialog, DialogOver} from './dialog-overview-example';
import {HttpModule} from '@angular/http';
import {CdkTableModule} from '@angular/cdk/table';


const appRoutes: Routes = [
  { path: '', component: DialogOverviewExample },
  {
    path: 'photos',
    component: DialogOver,
  },

  { path: '**', component: DialogOverviewExample }
];



@NgModule({
  exports: [
    CdkTableModule,
    MdAutocompleteModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdChipsModule,
    MdStepperModule,
    MdDatepickerModule,
    MdDialogModule,
    MdExpansionModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdNativeDateModule,
    MdPaginatorModule,
    MdProgressBarModule,
    MdProgressSpinnerModule,
    MdRadioModule,
    MdRippleModule,
    MdSelectModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdSnackBarModule,
    MdSortModule,
    MdTableModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule,
    RouterModule,
  ]
})
export class PlunkerMaterialModule {}

@NgModule({

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    PlunkerMaterialModule,
    MdNativeDateModule,
    ReactiveFormsModule,

  ],

  declarations: [DialogOverviewExample, DialogOverviewExampleDialog, DialogOver],
  bootstrap: [DialogOverviewExample, DialogOverviewExampleDialog, DialogOver],
  providers: [
   RouterModule
  ],
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

Answer 1

我在您的代码中发现了一些导致该问题的问题:

1. RouterModule 放置错误(请注意，RouterModule 是 NgModule 而不是 提供商)
2. 对话框没有 entryComponents(因为它们是动态渲染的)
3. 缺少router-outlet(@SalimIbrogimov 所说的，但他将该元素放置在对话框的错误部分)

这是更新后的代码:

main.ts:

const appRoutes: Routes = [
    {
        path: 'photos',
        component: DialogOver,
    }
];

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        HttpModule,
        PlunkerMaterialModule,
        MdNativeDateModule,
        ReactiveFormsModule,
        // Over here
        RouterModule.forRoot(appRoutes)

    ],

    declarations: [
        DialogOverviewExample,
        DialogOverviewExampleDialog,
        DialogOver
    ],
    bootstrap: [
        DialogOverviewExample
    ],
    entryComponents: [
        DialogOverviewExampleDialog,
        DialogOver
    ]
})
export class PlunkerAppModule {}

dialog-overview-example-dialog.html:

<h3 md-dialog-title>Test</h3>
<div md-dialog-content>
    <router-outlet></router-outlet>
</div>
<div md-dialog-actions *ngIf="router.url != '/photos'">
    <button md-button routerLink="/photos"  tabindex="2">Watch Photos</button>
    <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

dialog-overview-example.ts:[摘录]

@Component({
    selector: 'dialog-overview-example-dialog',
    templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

    constructor(
        public dialogRef: MdDialogRef<DialogOverviewExampleDialog>, @Inject(MD_DIALOG_DATA) public data: any, public router: Router) {}
    onNoClick(): void {
        this.dialogRef.close();
    }

}

Updated plunker