Question

有两种方法可以打开我的组件，一种是从导航栏中打开，另一种是在对话框中打开同一组件。组件内部只有一个提交表单。我希望当用户提交表单时对话框自动关闭。一切顺利，直到这里。现在发生真正的问题，如果使用以下语句关闭对话框 ts个文件

constructor(
    public dialogRef: MatDialogRef<NewCustomerComponent>,
    @Inject(MAT_DIALOG_DATA) public display: any

  ){...}

提交表单后的结束声明 this.dialogRef.close();

对话框成功关闭，但是同一组件从导航链接停止工作，如果我使用对话框打开它，则没有任何问题，但是从不打开，请单击导航链接并且发生以下错误。

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[NewCustomerComponent -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[NewCustomerComponent -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
NullInjectorError: StaticInjectorError(AppModule)[NewCustomerComponent -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[NewCustomerComponent -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
    at NullInjector.get (core.js:778)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveToken (core.js:2564)
    at tryResolveToken (core.js:2490)
    at StaticInjector.get (core.js:2353)
    at resolveNgModuleDep (core.js:26403)
    at NgModuleRef_.get (core.js:27491)
    at resolveDep (core.js:28021)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

这就是我调用对话框的方式

openCustomerDialog(): void {
    const dialogRef = this.dialog.open(NewCustomerComponent, {
      width: '700px',
      height: '600px',
      data: {
        view: 'dialog'
      }
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('OpenCustomer Dialog was closed');
      this.getCustomers()
    });
  }

我已经尝试在app.module.ts和component文件中包含材料库。并尝试了以下 providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }]在组件的模块文件中

如果我删除了 public dialogRef: MatDialogRef<NewCustomerComponent>语句。两种方法都可以正常打开组件，但不会关闭对话框。经过大量的杂耍，我将其发布在SO上，请帮助预先感谢

根据请求，这是我的app.module.ts文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { MatMomentDateModule } from '@angular/material-moment-adapter';
// import { MatButtonModule } from '@angular/material/button';
import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
import { TranslateModule } from '@ngx-translate/core';
import { MatSelectModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import 'hammerjs';

import { FuseModule } from '@fuse/fuse.module';
import { FuseSharedModule } from '@fuse/shared.module';
import { FuseProgressBarModule, FuseSidebarModule, FuseThemeOptionsModule } from '@fuse/components';

import { fuseConfig } from 'app/fuse-config';

import { AppComponent } from 'app/app.component';
import { LayoutModule } from 'app/layout/layout.module';
import { SampleModule } from 'app/main/sample/sample.module';
import { AddSalesPersonComponent } from './layout/components/Sales/add-sales-person/add-sales-person.component';
import { LoginComponent } from './layout/components/login/login.component';
import { MasterLayoutComponent } from './master-layout/master-layout.component';
import { NewLoanComponent } from './layout/components/loan/new-loan/new-loan.component';
import { ListSalesComponent } from './layout/components/Sales/list-sales/list-sales.component';
import { NewCustomerComponent } from './layout/components/customer/new-customer/new-customer.component';
import { CustomerListComponent } from './layout/components/customer/customer-list/customer-list.component';
import { NewOrganizationComponent } from './layout/components/organization/new-organization/new-organization.component';
import { ListOrganizationComponent } from './layout/components/organization/list-organization/list-organization.component';
import { NewProductComponent } from './layout/components/products/new-product/new-product.component';
import { ProductListComponent } from './layout/components/products/product-list/product-list.component';
import { NewAdminComponent } from './layout/components/admin/new-admin/new-admin.component';
import { ListAdminComponent } from './layout/components/admin/list-admin/list-admin.component';
import { LoanListComponent } from './layout/components/loan/loan-list/loan-list.component';
import { ReceivePaymentComponent } from './layout/components/payments/receive-payment/receive-payment.component';
import { MakePaymentComponent } from './layout/components/payments/make-payment/make-payment.component';

const appRoutes: Routes = [
    {
        path: '',
        component: MasterLayoutComponent,
        children: [
            {
                path: '',
                redirectTo: '/login',
                pathMatch: 'full'
            },
            {
                path: 'saveSalesPerson',
                component: AddSalesPersonComponent
            },
            {
                path: 'searchsalesperson',
                component: ListSalesComponent
            },
            {
                path: 'newcustomer',
                component: NewCustomerComponent
            },
            {
                path: 'searchcustomer',
                component: CustomerListComponent
            },
            {
                path: 'neworganization',
                component: NewOrganizationComponent
            },
            {
                path: 'searchorganization',
                component: ListOrganizationComponent
            },
            {
                path: 'newproduct',
                component: NewProductComponent
            },
            {
                path: 'searchpoduct',
                component: ProductListComponent
            },
            {
                path: 'newloan',
                component: NewLoanComponent
            },
            {
                path: 'searchLoan',
                component: LoanListComponent
            },
            {
                path: 'newadmin',
                component: NewAdminComponent
            },
            {
                path: 'searchadmin',
                component: ListAdminComponent
            },
            {
                path: 'receivePayments',
                component: ReceivePaymentComponent
            },
            {
                path: 'makePayments',
                component: MakePaymentComponent
            },
        ]
    },
    {
        path: 'login',
        component: LoginComponent,
    },

    {
        path: '**',
        redirectTo: 'salesperson'
    }
];

@NgModule({
    imports: [
        BrowserModule,
        FlexLayoutModule,
        MatButtonModule,
        MatFormFieldModule,
        FormsModule,
        MatInputModule,
        MatRippleModule,
        MatSelectModule,
        BrowserAnimationsModule,
        HttpClientModule,
        MatDialogModule,
        RouterModule.forRoot(appRoutes),

        TranslateModule.forRoot(),

        // Material moment date module
        MatMomentDateModule,

        // Material
        MatButtonModule,
        MatIconModule,

        // Fuse modules
        FuseModule.forRoot(fuseConfig),
        FuseProgressBarModule,
        FuseSharedModule,
        FuseSidebarModule,
        FuseThemeOptionsModule,

        // App modules
        LayoutModule,
        SampleModule
    ],
    declarations: [
        AppComponent,
        MasterLayoutComponent
    ],
    exports: [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule,

    ],
    bootstrap: [
        AppComponent
    ],
    providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }]

})
export class AppModule {
}

Answer 1

MatDialogModule中没有模块，您在app.module.ts中导入了数组。尝试在app.module.ts中导入MatDialog和MatDialogModule

。

Answer 2

您需要在模块声明中将MatDialogModule添加到imports：

import {MatDialogModule, MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

@NgModule({
  declarations: [...],
  imports: [
    ...
    MatDialogModule,
    ...
  ],
  providers: [...],
  entryComponents: [...],
  bootstrap: [...]
})

编辑： 您可以在app.module.ts文件中替换以下行：

import {MatDialogModule, MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

通过这个：（正确导入）

import {MatDialogModule, MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

Answer 3

感谢所有的帮助。尽管上述解决方案均无效，但是你们激励了我尝试其他不同的解决方案，而对我有用的解决方案是添加

providers: [{ provide: MatDialogRef, useValue: {} }]

在我的app.module.ts文件中

组件无法打开Angular

3 个答案: