Angular2 malzeme iletişim kutusunun sorunları var - @ NgModule.entryComponents'e eklediniz mi?

Https://material.angular.io/components/component/dialog adresindeki dokümanları takip etmeye çalışıyorum, ancak aşağıdaki sorunu neden anlayamıyorum?

Bileşene aşağıdakileri ekledim:

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

Modülüme ekledim

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

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

// ...

Yine de bu hatayı alıyorum ....

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:52
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345

entryComponentsİçine dinamik olarak oluşturulmuş bileşenler eklemeniz gerekir@NgModule

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

Not: Bazı durumlarda tembel yüklü modüllerentryComponents altında çalışmaz, çünkü bir geçici çözüm bunları (kökünüze) koyar.app.module

entryComponentsAltında kullanmanız gerekir @NgModule.

Bu, kullanılarak eklenen dinamik olarak eklenen bileşenler içindir ViewContainerRef.createComponent(). Compcomponents, çevrimdışı şablon derleyicisine bunları derlemelerini ve onlar için fabrikalar oluşturmalarını söyler.

Rota yapılandırmalarına kaydedilen bileşenler, DOM'a yönlendirilmiş bileşenler eklemek entryComponentsiçin router-outletde kullanıldığından ViewContainerRef.createComponent(), otomatik olarak da eklenir .

Yani kodunuz şöyle olacak

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

Bu oluyor, çünkü bu dinamik bir bileşen ve onu entryComponentsaltına eklemediniz @NgModule.

Sadece buraya ekleyin:

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

Açısal ekibin nasıl konuştuğuna bakın entryComponents:

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

Bu modül tanımlandığında derlenmesi gereken bileşenlerin listesini belirtir. Burada listelenen her bileşen için, Angular bir ComponentFactory oluşturur ve bunu ComponentFactoryResolver'da depolar.

Ayrıca, bu @NgModuledahil yöntemlerin listesi entryComponents...

Gördüğünüz gibi, hepsi entryComponentsbir dizi bileşeni kabul etmek de dahil olmak üzere isteğe bağlıdır (soru işaretlerine bakın) :

@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
})

MatDialogBir hizmetin içinde kullanmaya çalışıyorsanız - onu çağıralım 'PopupService've bu hizmet şu modülle tanımlanır:

@Injectable({ providedIn: 'root' })

o zaman işe yaramayabilir. Tembel yükleme kullanıyorum, ancak bunun uygun olup olmadığından emin değilim.

Yapmalısın:

• PopupServiceKullanarak, iletişim kutusunu açan bileşene doğrudan sağlayın [ provide: PopupService ]. Bu MatDialog, bileşenin örneğini (DI ile) kullanmasına izin verir . Bileşen çağrısı open, bu örnekte iletişim bileşeni ile aynı modülde olması gerektiğini düşünüyorum .
• İletişim bileşenini app.module'unuza taşıyın (diğer bazı yanıtların söylediği gibi)
• matDialogHizmetinizi aradığınızda başvurunuz .

Benim karışık cevabı dilerim, nokta var olma providedIn: 'root'MatDialog bir bileşeni kapalı bir şeyler koymaya gerektiğinden şeyler kırılıyor söyledi.

Tembel yükleme durumunda, MatDialogModule'u tembel yüklü modülde içe aktarmanız yeterlidir . Daha sonra bu modül, içe aktarılan MatDialogModule ile giriş bileşenini oluşturabilir :

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

Malzeme diyaloğunu entegre etmek mümkün olsa da , bu kadar önemsiz bir özellik için karmaşıklığın oldukça yüksek olduğunu buldum. Önemsiz bir özellik elde etmeye çalışıyorsanız kod daha karmaşık hale gelir.

Bu nedenle, kullanımı oldukça kolay bulduğum PrimeNG Dialog'u kullandım:

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 {}

İletişim kutunuzu bileşeninizin html'sine eklemeniz yeterlidir:

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

PrimeNG PrimeFaces belgelerinin takip edilmesi kolaydır ve çok hassastır.

DokümandaentryComponents belirtildiği gibi eklemeniz gerekir .

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

Aşağıda, iletişim kutusu olarak tanımlanan bir uygulama modülü dosyası için tam bir örnek verilmiştir entryComponents.

Eğer benim gibiyseniz ve bu konuya "Ama bir bileşen eklemeye çalışmıyorum, bir bekçi / servis / boru vb. sorun büyük olasılıkla yönlendirme yoluna yanlış tür eklemiş olmanızdır. Ben de öyle yaptım. Yanlışlıkla canActivate: bölümü yerine bir yolun bileşen: bölümüne bir koruma ekledim. IDE otomatik tamamlamayı seviyorum, ancak biraz yavaşlamanız ve dikkat etmeniz gerekiyor. Kesinlikle bulamazsanız, şikayet ettiği ad için global bir arama yapın ve bir adla kaymadığınızdan emin olmak için her kullanıma bakın.

Benim durumumda, bileşenimi bildirimlere ve entryComponents'e ekledim ve aynı hataları aldım. Ayrıca ithalat için MatDialogModule eklemem gerekiyordu.

Birisi burada hizmetlerden Dialog'u aramak gerekiyorsa, sorunu nasıl çözeceğinizdir. Yukarıdaki yanıtlardan bazılarına katılıyorum, cevabım, birisinin sorunlarla karşılaşabileceği durumlarda hizmetlerde diyalog çağırmak için.

Örneğin DialogService gibi bir servis oluşturun, sonra diyalog fonksiyonunuzu servislerin içine taşıyın ve diyalog servisinizi aşağıdaki kod gibi çağırdığınız bileşene ekleyin:

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

aksi halde hata alırsın