Angular 2 - 设置对话框 - 无法解析SettingsComponent的所有参数

我正在尝试为我的应用程序设置创建一个对话框。我使用以下代码创建了一个新的设置组件（参考文献here）。Angular 2 - 设置对话框 - 无法解析SettingsComponent的所有参数

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; 
    }) 
} 

}

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

ERROR在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'。

来源

2017-09-06 Ashish

你获得最新的材料2？ – Edric

@Edric - 感谢问题已通过最新角度材质2解决 – Ashish

我遇到了与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 { }

来源

2018-01-16 05:00:03

Angular 2 - 设置对话框 - 无法解析SettingsComponent的所有参数

回答

相关问题