Okno dialogowe materiału Angular2 ma problemy - czy dodałeś go do @ NgModule.entryComponents?

Musisz użyć entryComponents pod @NgModule.

Jest to dla dynamicznie dodawanych komponentów, które są dodawane za pomocą ViewContainerRef.createComponent(). Dodanie ich do entryComponents każe kompilatorowi szablonów offline kompilować je i tworzyć dla nich fabryki.

Komponenty zarejestrowane w konfiguracji trasy są dodawane automatycznie do entryComponents, Ponieważ router-outlet używa również ViewContainerRef.createComponent() do dodawania kierowanych komponentów do DOM.

Więc Twój kod będzie jak

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Dzieje się tak, ponieważ jest to komponent dynamiczny i nie dodałeś go do entryComponents Pod @NgModule.

Po prostu dodaj go tam:

@NgModule({
  /* ----------------- */
  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

Zobacz jak zespół mówi o entryComponents:

entryComponents?: Array<Type<any>|any[]>

określa listę komponenty, które powinny być skompilowane po zdefiniowaniu tego modułu. Na każdy komponent tutaj wymieniony, Angular utworzy Komponentfactory i przechowuj w ComponentFactoryResolver.

Jest to również lista metod na @NgModule w tym entryComponents...

Jak widać, wszystkie z nich są opcjonalne (spójrz na znaki zapytania), w tym entryComponents, które akceptują tablicę składników:

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

Jeśli próbujesz użyć MatDialog wewnątrz usługi-nazwijmy ją 'PopupService' i ta usługa jest zdefiniowana w module z:

@Injectable({ providedIn: 'root' })

Musisz:

• podaj swoje PopupService bezpośrednio do komponentu, który otworzy twoje okno dialogowe-używając [ provide: PopupService ]. Pozwala to na użycie (z DI) instancji MatDialog w komponencie. Myślę, że wywołanie komponentu open musi znajdować się w tym samym module co komponent dialogowy w tej instancji.
• Przenieś komponent okna dialogowego do swojej aplikacji.moduł (podobnie jak inne odpowiedzi)
• podaj referencję dla {[7] } kiedy zadzwonisz do swojego serwisu.

Przepraszam za moją zagmatwaną odpowiedź, chodzi o to, że to providedIn: 'root' łamie rzeczy, ponieważ MatDialog musi się wycofać z komponentu.

W przypadku lazy loading, wystarczy zaimportować MatDialogModule w Lazy loaded module. Wtedy ten moduł będzie mógł renderować komponent wejściowy z własnym importowanym MatDialogModule :

@NgModule({
  imports:[
    MatDialogModule
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Podczas gdy integracja okna dialogowego materiału jest możliwa , odkryłem, że złożoność tak trywialnej funkcji jest dość wysoka. Kod staje się bardziej złożony, jeśli próbujesz osiągnąć nietrywialne funkcje.

Z tego powodu, skończyło się okno dialogowe PrimeNG, które okazało się dość proste w użyciu:

m-dialog.component.html:

<p-dialog header="Title">
  Content
</p-dialog>

m-dialog.component.ts:

@Component({
  selector: 'm-dialog',
  templateUrl: 'm-dialog.component.html',
  styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
  // dialog logic here
}

m-dialog.module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    DialogModule
  ], 
  exports: [
    MDialogComponent,
  ], 
  declarations: [
    MDialogComponent
  ]
})
export class MDialogModule {}

Po prostu dodaj swoje okno dialogowe do swojego HTML komponentu:

<m-dialog [isVisible]="true"> </m-dialog>

Dokumentacja Primeng PrimeFaces jest łatwa do śledzenia i bardzo precyzyjna.

Należy dodać go do entryComponents, Jak określono w docs.

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

Oto Pełny przykład dla pliku modułu aplikacji z dialogiem zdefiniowanym jako entryComponents.

Jeśli jesteś taki jak ja, i gapisz się na ten wątek myśląc " ale nie próbuję dodać komponentu, próbuję dodać strażnika/usługę / rurę itp."wtedy prawdopodobnie problem polega na dodaniu niewłaściwego typu do ścieżki trasowania. To właśnie zrobiłem. Przypadkowo dodałem osłonę do sekcji komponent: ścieżki zamiast sekcji canActivate:. Uwielbiam autouzupełnianie IDE, ale musisz trochę zwolnić i zwrócić uwagę. Jeśli absolutnie nie możesz go znaleźć, wykonaj globalne wyszukiwanie jego nazwy narzeka i patrzy na każde użycie, aby upewnić się, że nie pomyliłeś się z imieniem.

W moim przypadku dodałem swój komponent do deklaracji i entryComponents i dostałem te same błędy. Musiałem również dodać MatDialogModule do importu.

Jeśli ktoś musi zadzwonić Dialog z usług tutaj jest jak rozwiązać problem. Zgadzam się z niektórymi z powyższych odpowiedzi, moja odpowiedź jest dla wywołania dialog w usługach, jeśli ktoś może napotkać problemy na.

Utwórz usługę na przykład DialogService, a następnie przenieś funkcję dialog wewnątrz usług i dodaj usługę dialogservice w komponencie, który wywołujesz, jak poniższy kod:

 @Component({
  selector: "app-newsfeed",
  templateUrl: "./abc.component.html",
  styleUrls: ["./abc.component.css",],
  providers:[DialogService]
})

W przeciwnym razie otrzymasz błąd

Miałem te same problemy i miałem dialogComponent w EntryComponents i nadal nie działa. w ten sposób udało mi się rozwiązać problem. link jest tutaj do wcześniej odpowiedzianego posta:

Https://stackoverflow.com/a/64224799/14385758