Angular2 재료 대화 상자에 문제가 있습니다. @NgModule.entryComponents에 추가했습니까?

Angular2 재료 대화 상자에 문제가 있습니다. @NgModule.entryComponents에 추가했습니까?

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

각도 9.0.0 <

Ivy에서 9.0.0 이후로 항목 구성요소 속성은 더 이상 필요하지 않습니다.권장 사항 안내서를 참조하십시오.

각도 9.0.0 >

요소를 동으로요에추야에 .entryComponents의 음에속에.@NgModule

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

참고: 경우에 따라entryComponents느리게 로드된 모듈은 작동하지 않습니다. 해결 방법은 모듈을 사용자의 컴퓨터에 넣으십시오.app.module설정)

은 야합다니해를 사용해야 .entryComponents@NgModule.

은 이다음사용추여가동는되추것다구대입니를 사용하여 추가되는 입니다.ViewContainerRef.createComponent()entryComponents에 구성요소를 추가하면 오프라인 템플릿 컴파일러에서 구성요소를 컴파일하고 해당 구성요소에 대한 공장을 만들 수 있습니다.

요소는 으로 경로구등구요다자추가다에 됩니다.entryComponents또한 왜냐하면router-outlet또한 사용합니다.ViewContainerRef.createComponent()라우팅된 구성 요소를 DOM에 추가합니다.

그래서 당신의 코드는 다음과 같습니다.

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

이는 동적 구성 요소이며 사용자가 추가하지 않았기 때문에 발생합니다.entryComponents@NgModule.

여기에 추가하기만 하면 됩니다.

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

Angular 팀이 어떻게 이야기하는지 보세요.entryComponents:

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

이 모듈을 정의할 때 컴파일해야 하는 구성 요소 목록을 지정합니다.컴포넌트 팩토리 리졸버는 Angular 컴포넌트 팩토리입니다.

또한 다음은 다음과 같은 방법의 목록입니다.@NgModule포하여를 entryComponents...

보시는 바와 같이, 다음을 포함한 모든 항목이 선택 사항입니다(질문 표시 참조).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
})

를 사용하려는 MatDialog에서 - - 그을르자것서▁it부.'PopupService'해당 서비스는 다음과 같은 기능을 갖춘 모듈에 정의됩니다.

@Injectable({ providedIn: 'root' })

안 될 수도 있어요나는 게으른 로딩을 사용하고 있지만, 그것이 관련이 있는지 없는지 잘 모르겠습니다.

다음 작업을 수행해야 합니다.

• 다음을 제공합니다.PopupService대화 상자를 여는 구성 요소로 직접 이동 - 사용[ provide: PopupService ] ( 를이통해사수있다용(DI와 함께)를 사용할 수 .MatDialog구성 요소의 인스턴스입니다.내 생각에 구성 요소가 전화를 건 것 같습니다.open이 경우 대화 상자 구성 요소와 동일한 모듈에 있어야 합니다.
• 대화 구성 요소를 app.module로 이동합니다(다른 답변에서 언급했듯이).
• 대전음달에 대한 합니다.matDialog서비스를 호출할 때.

제 혼란스러운 답변에 대해 죄송합니다. 요점은 MatDialog가 구성 요소를 피기백해야 하기 때문에 문제를 해결하는 것입니다.

Lazy Loading의 경우 Lazy Loading 모듈에서 MatDialogModule을 가져오기만 하면 됩니다.그러면 이 모듈은 자체적으로 가져온 MatDialogModule로 항목 구성 요소를 렌더링할 수 있습니다.

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

재료 대화상자를 통합하는 것이 가능하지만, 저는 그러한 사소한 기능에 대한 복잡성이 상당히 높다는 것을 발견했습니다.사소한 기능을 수행하려는 경우 코드가 더 복잡해집니다.

그런 이유로, 저는 PrimeNG Dialog를 사용하게 되었고, 사용하기가 매우 간단하다고 생각이 들었습니다.

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

대화상자를 구성요소의 html에 추가하기만 하면 됩니다.

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

PrimeNG PrimeFaces 설명서는 쉽게 이해할 수 있고 매우 정확합니다.

은 그것을 합추야니다에 해야 합니다.entryComponents문서에 명시된 대로.

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

다음은 다음과 같이 정의된 대화 상자가 있는 앱 모듈 파일의 전체 예입니다.entryComponents.

저와 마찬가지로 "구성 요소를 추가하려는 것이 아니라 가드/서비스/파이프 등을 추가하려고 합니다."라고 생각하여 이 스레드를 응시하고 있는 경우, 문제는 라우팅 경로에 잘못된 유형을 추가했을 가능성이 높습니다.그게 제가 한 일입니다.실수로 canActivate: 섹션 대신 경로의 component: 섹션에 가드를 추가했습니다.저는 IDE 자동완성을 좋아하지만, 당신은 속도를 줄이고 주의를 기울여야 합니다.만약 당신이 그것을 절대 찾을 수 없다면, 그것이 불평하는 이름을 전세계적으로 검색하고 모든 사용법을 살펴서 당신이 이름을 실수하지 않았는지 확인하세요.

저의 경우, 선언 및 항목 구성요소에 구성요소를 추가했는데 동일한 오류가 발생했습니다.또한 가져오기에 MatDialogModule을 추가해야 했습니다.

서비스에서 Dialog를 호출해야 하는 경우 문제를 해결하는 방법이 여기에 있습니다.저는 위의 답변 중 일부에 동의합니다. 저의 답변은 누군가 문제에 직면할 수 있는 경우 서비스의 대화를 요청하는 것입니다.

DialogService와 같은 서비스를 만든 다음 서비스 내에서 대화 기능을 이동하고 아래 코드와 같이 호출하는 구성 요소에 대화 서비스를 추가합니다.

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

그렇지 않으면 오류가 발생합니다.

동일한 문제가 있었고 EntryComponents에 dialogComponent가 있었는데 여전히 작동하지 않았습니다.이것이 제가 그 문제를 해결할 수 있었던 방법입니다.이전에 답변한 게시물에 대한 링크는 다음과 같습니다.

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

언급URL : https://stackoverflow.com/questions/41519481/angular2-material-dialog-has-issues-did-you-add-it-to-ngmodule-entrycomponent