Angular Material 组件在 `Material Dialog` 内部不起作用

Question

我在对话框中使用 mat-form-field、mat-dialog-close 和 ng-model 属性。但它的抛出错误表明它不知道输入/按钮的属性。

title-dialog.html

<h1 mat-dialog-title></h1>
<div mat-dialog-content>
  <p>Enter Column Name</p>
  <mat-form-field>
    <input matInput [(ngModel)]="data.animal" />
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <br />
  <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>
    Ok
  </button>
</div>

MyComponent.ts

import {
    Component,
    OnInit,
    Input,
    OnChanges,
    Output,
    EventEmitter
} from '@angular/core';
import {
    Inject
} from '@angular/core';
import {
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from '@angular/material/dialog';
import {
    MatTableDataSource
} from '@angular/material/table';
import {
    MatSnackBar
} from '@angular/material/snack-bar';


@Component({
    selector: 'app-test',
    templateUrl: './test.html',
    styleUrls: ['./test.scss'],
})
export class MyComponent implements OnInit {

    animal: string;
    constructor() {}
    ngOnInit(): void { this.openDialog(); }

    openDialog(): void {
        const dialogRef = this.dialog.open(TitleDialogComponent, {
            width: '250px',
            data: {
                animal: this.animal
            }
        });

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


}

@Component({
    selector: 'app-title-dialog',
    templateUrl: './title-dialog.html'
})
export class TitleDialogComponent {

    constructor(
        public dialogRef: MatDialogRef < TitleDialogComponent > ,
        @Inject(MAT_DIALOG_DATA) public data) {}

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

}

我在这里遗漏了什么吗？我已将所有 Material 导入包含在 app.module.ts 中，并且它在其他组件中运行良好。

得到这些错误

Edit 1:

我在这里导入我的 Material 组件

Material.module.ts

import { NgModule } from '@angular/core';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatSelectModule} from '@angular/material/select';
import {MatIconModule} from '@angular/material/icon';
import {MatTooltipModule} from '@angular/material/tooltip';
import {MatTableModule} from '@angular/material/table';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTabsModule} from '@angular/material/tabs';
import {MatListModule} from '@angular/material/list';
import {MatDialogModule} from '@angular/material/dialog';


@NgModule({
  imports: [
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatTabsModule,
    MatListModule,
    MatDialogModule
  ],
  exports: [
    MatStepperModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatSelectModule,
    MatIconModule,
    MatTooltipModule,
    MatTableModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatSnackBarModule,
    MatTabsModule,
    MatListModule,
    MatDialogModule
  ]
})
export class MaterialModule {}

我只有一个模块没有子模块，我的 app.module.ts 是

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from '../app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyComponent} from '../components/home/home.component';
import { MaterialModule } from './material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { RangeSelectionDirective } from '../components/range-selection.directive';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RangeSelectionDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    MaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

编辑:刚注意到您的 TitleDialogComponent 没有在您的 AppModule 中声明。这可能是主要原因-.-

在app.module.ts中，

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    RangeSelectionDirective,
    TitleDialogComponent // <------- Add this
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    MaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

对于以下内容:最好添加一个引用。尽管以上内容应该足以解决您的问题。

您的模块导入似乎是正确的。也就是说，从错误消息中可以清楚地看出 TitleDialogComponent 没有注册任何模块。我对这个问题的猜测是您打开模态框的方式，而无需使用 stackblitz。

尝试将目标模式引用为其父组件的属性，如下所示:

export class MyComponent implements OnInit {

    animal: string;
    titleDialogRef: MatDialogRef<TitleDialogComponent>; // <------ Added this
    constructor() {}
    ngOnInit(): void { this.openDialog(); }

    openDialog(): void {
        // Assign to titleDialogRef instead
        this.titleDialogRef = this.dialog.open(TitleDialogComponent, {
            width: '250px',
            data: {
                animal: this.animal
            }
        });

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


}