Question

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

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

module.ts：

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

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

＆＃39;照片＆＃39;是包含照片的对话框。

在第一个对话框中，我将routerLink设置为名为＆＃34的按钮;所以照片＆＃34;：

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

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

错误错误：没有路由器的提供商！

整个module.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

我认为您需要在<router-outlet></router-outlet>中添加mdDialog：

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

Answer 2

我发现代码中存在一些导致问题的问题：

错误放置RouterModule（请注意RouterModule为NgModule且不为Provider）
对话框没有entryComponents（因为它们是动态呈现的）
缺少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

mdDialog中的angular2路由

2 个答案: