Angular2 सामग्री संवाद में समस्याएं हैं-क्या आपने इसे @ NgModule.entryComponents में जोड़ा था?




angular-material (4)

आपको अपने @NgModule अंदर entryComponents गतिशील रूप से बनाए गए घटक जोड़ने की आवश्यकता है

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

नोट: कुछ मामलों में entryComponents आलसी लोड मॉड्यूल के तहत entryComponents काम नहीं करेंगे, क्योंकि वर्कअराउंड उन्हें आपके app.module में app.module (रूट)

मैं https://material.angular.io/components/component/dialog पर दस्तावेज़ों का पालन करने का प्रयास कर रहा हूं लेकिन मुझे समझ में नहीं आ रहा है कि इसमें निम्न समस्या क्यों है?

मैंने नीचे अपने घटक पर जोड़ा:

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

मेरे मॉड्यूल में मैंने जोड़ा

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

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

फिर भी मुझे यह त्रुटि मिलती है ....

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 अंतर्गत @NgModule entryComponents नहीं जोड़ा है।

बस इसे वहां जोड़ें:

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

देखें कि कैसे कोणीय टीम entryComponents बारे में बात करती है टिप्पणी में टिप्पणी:

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

इस मॉड्यूल को परिभाषित करते समय संकलित किए जाने वाले घटकों की एक सूची निर्दिष्ट करता है। यहां सूचीबद्ध प्रत्येक घटक के लिए, कोणीय एक घटक फैक्ट्री बनाएगा और इसे घटक फैक्ट्रीरोलॉल्वर में संग्रहीत करेगा।

इसके अलावा @NgModule पर @NgModule की सूची सहित विधियों की सूची भी है ...

जैसा कि आप देखते हैं कि वे सभी वैकल्पिक हैं (प्रश्न चिह्न देखें), जिसमें entryComponents जो घटकों की एक सरणी स्वीकार करते हैं:

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

भौतिक संवाद को एकीकृत करना संभव है , मैंने पाया कि इस तरह की छोटी सुविधा के लिए जटिलता काफी अधिक है। यदि आप एक गैर-तुच्छ सुविधाओं को प्राप्त करने की कोशिश कर रहे हैं तो कोड अधिक जटिल हो जाता है।

इसी कारण से, मैंने प्राइमएनजी संवाद का उपयोग करके समाप्त किया, जिसे मैंने उपयोग करने के लिए बहुत सरल पाया:

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

बस अपने संवाद के एचटीएमएल में अपना संवाद जोड़ें:

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

प्राइमएनजी प्राइमफेस दस्तावेज का पालन करना आसान है और बहुत सटीक है।


आपको entryComponents अंतर्गत @NgModule entryComponents का उपयोग करने की आवश्यकता है।

यह गतिशील रूप से जोड़े गए घटकों के लिए है जो ViewContainerRef.createComponent() का उपयोग करके जोड़े गए हैं। उन्हें प्रविष्टि में जोड़ना कॉम्पोनेंट्स उन्हें संकलित करने और उनके लिए कारखानों को बनाने के लिए ऑफ़लाइन टेम्पलेट कंपाइलर को बताता है।

रूट कॉन्फ़िगरेशन में पंजीकृत घटक स्वचालित रूप से entryComponents में जोड़े जाते हैं क्योंकि router-outlet भी DOM में रूटेड घटकों को जोड़ने के लिए ViewContainerRef.createComponent() का उपयोग करता है।

तो आपका कोड जैसा होगा

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