Angular - добавить событие щелчка в меню «Компонент как страница», которое используется в качестве диалогового окна внутри другого компонента.

Question

Я использовал компонент в качестве диалогового окна на другой странице компонента. Но теперь мне нужно использовать это же диалоговое окно в качестве события щелчка страницы в меню.

При попытке сделать это выдает ошибку ----

core.js:1449 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[CopyImplementDialogComponent -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[CopyImplementDialogComponent -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
Error: StaticInjectorError(AppModule)[CopyImplementDialogComponent -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[CopyImplementDialogComponent -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
    at _NullInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js._NullInjector.get (core.js:1003)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1111)
    at resolveToken (core.js:1301)
    at tryResolveToken (core.js:1243)
    at StaticInjector.webpackJsonp../node_modules/@angular/core/esm5/core.js.StaticInjector.get (core.js:1111)
    at resolveNgModuleDep (core.js:10896)
    at NgModuleRef_.webpackJsonp../node_modules/@angular/core/esm5/core.js.NgModuleRef_.get (core.js:12129)
    at resolveDep (core.js:12619)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

это код NavBar.

                {
                    icon: 'file_copy',
                    text: 'Copy Implement',
                    type: NavType.RouterLink,
                    location: 'copy/implement'
                },

это router.ts

{
        path: 'copy/implement',
        component: CopyImplementDialogComponent
},

это мое приложение.Modeule.ts

import { CopyImplementDialogComponent } from './setup-implement/copy-implement-dialog/copy-implement-dialog.component';
import { MatDialogModule} from '@angular/material';
import { HttpClientModule } from '@angular/common/http'

@NgModule({
    entryComponents: [
        ImplementStatusModalComponent,
        AttachImplementModalComponent,
        RemoveImplementModalComponent,
        RecordRepairModalComponent,
        RecordReplaceModalComponent,
        ChangeImplementJobsiteModalComponent,
        AddRepairerWorkshopModalComponent,
        SchematicViewComponent,
        DeleteConfirmationDialogComponent
    ],
  declarations: [
      AppComponent,
      NavbarTopComponent,
      NavbarSide,
      BreadCrumbTopComponent,
      RedirectComponent,
      DashboardComponent,
      ImplementDetailsComponent,
      ImplementStatusModalComponent,
      AttachImplementModalComponent,
      RemoveImplementModalComponent,
      RecordRepairModalComponent,
      RecordReplaceModalComponent,
      ChangeImplementJobsiteModalComponent,
      RemoveImplementModalComponent,
      ImplementTemplateSetupComponent,
      AddRepairerWorkshopModalComponent,
      FilterPipe,
      ImplementTemplatesComponent,
      SchematicViewComponent,
      CarouselComponent,
      CarouselItemDirective,
      CarouselItemElement,
      SetupEquipmentComponent,
      SetupImplementComponent,
      ApplySelectionComponent,
      DraggableSchematicComponent,
      DeleteConfirmationDialogComponent,
      PreferencesComponent,
      CopyImplementDialogComponent
  ],
  imports: [
      routing,
      BrowserModule,
      HttpModule,
      FormsModule,
      MaterialModule,
      BrowserAnimationsModule,
      ReactiveFormsModule,
      MatTooltipModule,
      MatDialogModule, 
      HttpClientModule,
      ToastModule.forRoot()
  ],
  providers: [
      AppService,
      ImplementDetailsService,
      ChangeImplementJobsiteModalService,
      AttachImplementModalService,
      RemoveImplementModalService,
      ImplementStatusModalService,
      InventoryService,
      CustomerService,
      EquipmentService,
      ImplementTemplateService,
      UserService,
      SchematicViewService,
      SetupEquipmentService,
      SetupImplementService,
      PreferencesService
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }