Есть два способа открыть мой компонент, один с панели навигации, а другой — открыть тот же компонент в диалоговом окне. Внутри компонента есть только форма отправки. Я хочу, чтобы диалог автоматически закрывался, когда пользователь отправлял форму. Все хорошо, пока здесь. Реальные проблемы возникают сейчас, если использовать следующую инструкцию, чтобы закрыть файл диалога ts

 constructor( public dialogRef: MatDialogRef{amp}lt;NewCustomerComponent{amp}gt;, @Inject(MAT_DIALOG_DATA) public display: any ){...} 

закрытие заявления после this.dialogRef.close(); формы this.dialogRef.close();

диалоговое окно закрывается успешно, но тот же компонент перестает работать из навигационной ссылки, работает без каких-либо проблем, если я открываю его с помощью диалогового окна, но никогда не открывается, я щелкаю навигационную ссылку и возникает следующая ошибка.

 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[NewCustomerComponent -{amp}gt; MatDialogRef]: StaticInjectorError(Platform: core)[NewCustomerComponent -{amp}gt; MatDialogRef]: NullInjectorError: No provider for MatDialogRef! NullInjectorError: StaticInjectorError(AppModule)[NewCustomerComponent -{amp}gt; MatDialogRef]: StaticInjectorError(Platform: core)[NewCustomerComponent -{amp}gt; 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 ={amp}gt; { console.log('OpenCustomer Dialog was closed'); this.getCustomers() }); } 

Я уже пытался включить библиотеки материалов в app.module.ts и файл component . и пробовал следующих providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }] тоже providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }] в файле модуля компонента

Если я public dialogRef: MatDialogRef{amp}lt;NewCustomerComponent{amp}gt; выражение public dialogRef: MatDialogRef{amp}lt;NewCustomerComponent{amp}gt; . компонент открывается нормально с обеих сторон, но диалог не закрывается. После адского жонглирования я выкладываю это на ТАК, помогите пожалуйста Заранее спасибо

по запросу, вот мой файл 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 { } 

Модуль MatDialogModule в вашем массиве импорта в app.module.ts Попробуйте импортировать MatDialog и MatDialogModule в вашем app.module.ts

,

Вам необходимо добавить MatDialogModule к MatDialogModule в объявлении вашего модуля:

 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'; 

Спасибо всем тем, кто помогает. Хотя ни одно из вышеперечисленных решений не сработало, но вы, ребята, побудили меня много попробовать другие решения, и решение, которое сработало для меня, заключалось в добавлении

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

в моем файле app.module.ts