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的所有參數

回答

相關問題