角2 - 設定ダイアログ - SettingsComponentのすべてのパラメータを解決できません

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：

を10

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で

ERROR：/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 { }