Programming

각도 ngModule의 entryComponents 란 무엇입니까?

procodes 2020. 7. 27. 21:40
반응형

각도 ngModule의 entryComponents 란 무엇입니까?


의존 하는 Ionic앱 ( 2.0.0-rc0) 작업 중입니다 angular 2. 그래서 새로운 소개 ngModules가 포함되었습니다. app.module.ts.아래에 추가하고 있습니다.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Users } from '../pages/users/users';

@NgModule({
  declarations: [
    MyApp,
    Users
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Users
  ]
})
export class AppModule {}

무엇 않습니다 entryComponents여기합니까? Components에 이미 정의되어 declarations있습니다. 그래서 반복해야 할 것은 무엇입니까? 여기에 컴포넌트를 포함시키지 않으면 어떻게 되나요?


을 사용하여 추가 한 동적으로 추가 된 구성 요소를위한 것 ViewContainerRef.createComponent()입니다. 그것들을 추가 entryComponents하면 오프라인 템플릿 컴파일러가 컴파일하고 팩토리를 만들 도록 지시합니다.

라우팅 된 구성 요소를 DOM에 추가 하는 에도 사용 entryComponents되므로 경로 구성에 등록 된 구성 요소도 자동으로 추가됩니다.router-outletViewContainerRef.createComponent()

오프라인 템플릿 컴파일러 (OTC)는 실제로 사용되는 구성 요소 만 빌드합니다. 구성 요소를 템플릿에서 직접 사용하지 않으면 OTC는 해당 구성 요소를 컴파일해야하는지 알 수 없습니다. entryComponents를 사용하면 OTC에이 구성 요소를 컴파일하여 런타임에 사용할 수 있도록 지시 할 수 있습니다.

입력 구성 요소 란 무엇입니까? (angular.io)

NgModule 문서 (angular.io)

이 구성 요소가 정의 될 때 컴파일해야하는 구성 요소를 정의합니다. 여기에 나열된 각 구성 요소에 대해 Angular는 ComponentFactory를 만들어 ComponentFactoryResolver에 저장합니다.

동적으로 추가 된 구성 요소를 나열하지 않으면 entryComponentsAngular가 작성하지 않았기 때문에 누락 된 팩토리에 대한 오류 메시지가 표시됩니다.

참조 https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html


Angular 문서 보다 더 나은 설명을 얻지 못합니다 .

아래는 각도 문서의 설명입니다.

입력 컴포넌트는 Angular가 유형별로 반드시로드하는 컴포넌트입니다.

선택기를 통해 선언적으로로드 된 구성 요소는 입력 구성 요소가 아닙니다.

대부분의 응용 프로그램 구성 요소는 선언적으로로드됩니다. Angular는 구성 요소의 선택기를 사용하여 템플릿에서 요소를 찾습니다. 그런 다음 컴포넌트의 HTML 표현을 작성하고 선택한 요소의 DOM에 삽입합니다. 이들은 엔트리 구성 요소가 아닙니다.

일부 구성 요소는 동적으로 만로드되며 구성 요소 템플리트에서 참조되지 않습니다.

부트 스트랩 된 루트 AppComponent는 항목 구성 요소입니다. 사실, 선택기는 index.html의 요소 태그와 일치합니다. 그러나 index.html구성 요소 템플릿 AppComponent이 아니며 선택기가 구성 요소 템플릿의 요소와 일치하지 않습니다.

Angular는 유형별로 나열 @NgModule.bootstrap되거나 모듈의 ngDoBootstrap 메소드를 사용하여 필수적 으로 증폭되기 때문에 AppComponent를 동적으로로드합니다 .

경로 정의의 구성 요소도 입력 구성 요소입니다. 경로 정의는 유형별로 구성 요소를 나타냅니다. 라우터는 라우팅 된 구성 요소 선택기 (있는 경우)를 무시하고 구성 요소를로 동적으로로드합니다 RouterOutlet.

컴파일러는 다른 구성 요소 템플릿에서 이러한 입력 구성 요소를 찾아서 검색 할 수 없습니다. entryComponents목록 에 추가하여 그들에 대해 알려야 합니다.

Angular는 다음 유형의 구성 요소를 모듈에 자동으로 추가합니다 entryComponents.

  • @NgModule.bootstrap목록 의 구성 요소
  • 라우터 구성에서 참조되는 구성 요소.

이러한 구성 요소를 명시 적으로 언급 할 필요는 없지만, 그렇게하는 것은 무해합니다.


다른 답변은 이것을 언급하지만 기본 요약은 다음과 같습니다.

  • HTML 템플릿 내에서 Component를 사용하지 않을 때 필요 <my-component />
  • 예를 들어 각도 재질 대화 상자 구성 요소를 사용할 때 구성 요소를 간접적으로 사용합니다.

재료 대화 상자 구성 요소는 템플릿이 아닌 TS 코드 내에 생성됩니다.

    const dialogRef = this.dialog.open(MyExampleDialog, { width: '250px' });
  }

이를 위해서는 entryComponent로 등록해야합니다.

  • entryComponents: [MyExampleDialog]

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

  • ERROR Error: No component factory found for MyExampleDialog. Did you add it to @NgModule.entryComponents?

The entryComponents array is used to define only components that are not found in html and created dynamically. Angular requires this hint to find entry component and compile them.

There are two main types of entry components:

  • The bootstrapped root component.
  • A component you specify in a route definition.

For more detailed information around entry components, please refer angular.io https://angular.io/guide/entry-components


A Bit of Background about entryComponent

entryComponent is any component Angular loads imperatively. You can declare entryComponent by bootstrapping it in NgModule or in route definitions.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] // bootstrapped entry component
})

Documentation says below

To contrast the two types of components, there are components which are included in the template, which are declarative. Additionally, there are components which you load imperatively; that is, entry components.

Now to answer your specific question about entryComponents

There is entryComponents array in @NgModule file. You can use this to add entryComponents if component is bootstrapped using ViewContainerRef.createComponent().

That is you're creating components dynamically and not by bootstrapping or in template.

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(myComp.component);
const viewContainerRef = this.compHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);

참고URL : https://stackoverflow.com/questions/39756192/what-is-entrycomponents-in-angular-ngmodule

반응형