Question

我正在尝试为我的应用程序设置创建一个对话框。我创建了一个包含以下代码的新设置组件（来自here的引用）。

settings.component.html：

<md-dialog-title>Settings</md-dialog-title>
<div md-dialog-content>
  <md-slide-toggle [(ngModel)]="data.theme">Toggle Theme</md-slide-toggle>
</div>
<div md-dialog-actions>
  <button md-button [md-dialog-close]="data.theme" tabindex="2">Save</button>
  <button md-button (click)="onNoClick()" tabindex="-1">Cancel</button>
</div>

settings.component.ts：

import {Component, Inject} from '@angular/core';
import {MdDialogRef, MD_DIALOG_DATA} from "@angular/material"
@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent{
  constructor(
    public dialogRef: MdDialogRef<SettingsComponent>,
    @Inject(MD_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();
  }
}

参考main-nav.componenet.html的代码：

<button md-menu-item (click)="openDialog()"><md-icon>settings</md-icon>Settings</button>

main-nav.component.ts：

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {MdDialog, MdDialogConfig, MdSidenav} from "@angular/material";
import {SettingsComponent} from "../settings/settings.component";

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent implements OnInit {
  @Input()
  private sideNavRef: MdSidenav;

  @Output()
  private colorRef: EventEmitter<boolean> = new EventEmitter();
  private isDarkTheme = false;
  theme: boolean;

  constructor(public dialog: MdDialog) {}

  ngOnInit() {
  }

  changeTheme(){
    this.isDarkTheme = !this.isDarkTheme;
    this.colorRef.emit(this.isDarkTheme);
    console.log(this.isDarkTheme);
  }

  openDialog(): void {
    let dialogRef = this.dialog.open(SettingsComponent, <MdDialogConfig>{
      width: '250px',
      data: {theme: this.isDarkTheme}
    });

    dialogRef.afterClosed().subscribe( result => {
      console.log('The dialog was closed');
      // this.isDarkTheme=result;
    })
}

}

应用程序编译正常，但我无法运行它。得到以下异常：

C中的错误：/my-data/code/xenia/xenia-ui/src/app/settings/settings.component.ts（2,22）：模块'“C：/ my-data / code / xenia / xenia-ui / node_modules / @ angular / material / index“'没有导出的成员'MD_DIALOG_DATA'。

Answer 1

我遇到了与MAT_DIALOG_DATA类似的情况，问题是我没有将我的组件设置为应用程序的入口组件。

在app.module.ts中添加以下内容：

entryComponents : [SettingsComponent],

所以你的文件应该是这样的：

@NgModule({
  declarations: [
    AppComponent,
    SettingsComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    MatDialogModule,
    MatSelectModule,
    MatInputModule,
    MatDatepickerModule,
    MatMomentDateModule
  ],
  entryComponents : [SettingsComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 2 - 设置对话框 - 无法解析SettingsComponent

1 个答案: