선언과 항목 구성요소의 차이점은 무엇입니까?

선언과 항목 구성요소의 차이점은 무엇입니까?

내 app.module.ts에 다음이 있습니다.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { EliteApi } from '../shared/shared';
import { MyApp } from './app.component';
import { MyTeams, Tournaments, TeamDetails, Teams, TeamHome, Standings } from '../pages/pages';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
    declarations: [
        MyApp,
        MyTeams,
        TeamDetails,
        Tournaments,
        Teams,
        TeamHome,
        Standings
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        MyTeams,
        TeamDetails,
        Tournaments,
        Teams,
        TeamHome,
        Standings
    ],
    providers: [
        HttpModule,
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler },        
        EliteApi
    ]
})
export class AppModule { }

순간 나의 금나의지의.declarations그리고.entryComponents둘 다 정확히 같습니다.앱을 위해 작성한 모든 페이지/구성요소가 포함되어 있습니다.속성에서 항목을 제거하면 angular2에서 오류가 발생합니다.

제 질문은 만약 그것들이 항상 같다면, 이 부동산들의 필요성은 무엇인가요?저는 제가 확실히 여기서 어떤 점을 놓치고 있다고 생각합니다.항목 구성 요소와 선언 작업이 서로 다를 때는 언제입니까?

그entryComponents배열은 html에서 찾을 수 없고 동적으로 생성되는 구성 요소만 정의하는 데 사용됩니다.ComponentFactoryResolverAngular는 그것들을 찾아서 컴파일하기 위해 이 힌트가 필요합니다.다른 모든 구성 요소는 선언 배열에 나열되어야 합니다.

여기 각진 부위에 대한 문서가 있습니다.

@줄리아가 이 질문에 대답한 것에 추가합니다.모달의 사용 사례를 추가하고 싶습니다.

---

예를 예들어같구, 다은요있습다소니가라고 구성 .ModalComponent더 쉽게 재사용할 수 있도록 구성 요소 이름을 전달하고 해당 구성 요소가 내부에서 렌더링될 것으로 예상합니다.ModalComponent*.

플module.ts다음과 같은 것이 될 수 있습니다.

import:[ModalModule],  // As a best practice, we can create Modal as a separate Feature
entryComponent : [TheCompYouWantToRenderInsideModalComponent]

우리는 통과할 것입니다.TheCompYouWantToRenderInsideModalComponent~하듯이entryComponent웹 사이트 코드를 작성하는 동안 이 구성 요소가 존재하지 않기 때문입니다(즉, 어떤 파일에도 의 선택기가 없습니다).패스하겠습니다.component모드로 이동한 다음 모드를 열 때 동적으로 렌더링됩니다.다음과 같은 것이 있습니다.

onSomeButtonClickToOpenModal(){
     this.modalService.openModal(TheCompYouWantToRenderInsideModalComponent);
}

---

_{****에서ModalModule우리는 사용할 서비스를 만들 것입니다.ComponentFactoryResolver그리고 테이크TheCompYouWantToRenderInsideModalComponent론의로서 ▁it)라고 부를 수 있습니다.openModal(componentType: ComponentType)를 사용하여 열고 것입니다ComponentFactoryResolver}

---

측면 참고: TheentryComponentAngular Angular V6에서도 을 할 입니다.elements동일한 목적을 위한 기능.

업데이트: Angular 9

와 함께Angular 9풀려나면, 우리는 더 이상 가질 필요가 없습니다.entryComponent아이비 컴파일러 덕분에

간단히 말해서:

"짜는진"의 에 있는 entryComponents이고, 반면에 , 나니다습무shaking반▁is심다▁tree.declarations모듈 캡슐화를 위해 주로 존재합니다.그래서 그들은 비교조차 되지 않습니다.나무 흔들기가 우리의 관심사가 아니라면, 우리는 두 가지 모두를 위한 단일 소스로 선언하는 것이 좋을 것입니다.

더 긴 답변

든모.components사용자가 사용자 환경에서 생성한module마지막 묶음으로 가지 마십시오. 신대, 에선된구요에 template용사를 selectors 더 는또components에 것.entryComponents배열(사용자 또는 프레임워크 사용).

할 때 할 수 .ComponentFactoryResolver 루트 작성 중에 할 수 .또는 루트 배열에서 선언하거나 다른 필수 작성 중에 구성요소를 추가할 수 있습니다.

공식 문서에서:

실제로 많은 라이브러리에서 사용자가 절대 사용하지 않을 구성 요소를 선언하고 내보냅니다.예를 들어, 재료 설계 라이브러리는 사용할 구성요소를 모르기 때문에 모든 구성요소를 내보냅니다.하지만, 여러분이 그것들을 모두 사용할 것 같지는 않습니다.참조하지 않는 구성 요소의 경우 트리 셰이커가 최종 코드 패키지에서 이러한 구성 요소를 삭제합니다.

구성요소가 항목 구성요소가 아니고 템플릿에서 찾을 수 없는 경우 트리 셰이커가 해당 구성요소를 버립니다.따라서 앱을 최대한 다듬을 수 있도록 진정한 엔트리 구성 요소인 구성 요소만 추가하는 것이 가장 좋습니다.

Ivy가 명시적으로 활성화된 Angular 9 또는 Angular 8의 경우

Ivy가 포함된 엔트리 구성요소는 더 이상 필요하지 않으며 더 이상 사용되지 않습니다.

이를 위해서는 구성 요소를 만들 때 실제로 얼마나 각이 뒤에서 작동하는지 이해해야 합니다.

뿐만 아니라 의 지시사항과 파이프에 .declarations을 의열로 표시합니다.@NgModuleapp.module.ts 개 )modules을 "기능 모듈"로 .app.module.ts imports 그 배열등feature module에는 모든 요소가 되어 있습니다.declarations배열).

위에서 언급한 단계는 각도가 모든 파일을 자동으로 검색하지 않기 때문에 구성 요소가 무엇인지 또는 앱에 있는 구성 요소와 지시사항을 이해하는 데 중요합니다.새 구성 요소를 생성한 후에는 어떤 구성 요소가 있는지 알려주어야 합니다.

그러나 이것만으로도 각도를 인식할 수 있기 때문에 두 곳 중 하나에서 이러한 구성 요소를 찾을 수 있습니다.

1. 만약 당신의 템플릿에서 각도가 발견된다면 첫 번째 위치는 당신의 템플릿에 있을 것입니다.selector의 -->그에는 기본적으로 요의소성구다--> 다기음로조사니합으적본그런▁the▁into다▁of를 조사합니다.declarations특정 구성 요소에 대한 배열 --> 은 해당 구성 요소를 찾은 다음 해당 구성 요소를 만들 수 있습니다.

2. 가 이 요소를 .routs의 신의에rout config 때, 는 ,--> 당이구요가리때킬또에서 그것을 입니다.declarations어레이 및 -->에서 이러한 구성 요소를 생성하고 로드할 수 있음을 발견한 경우.

코드에서 구성요소를 수동으로 작성하려는 경우에는 기본적으로 작동하지 않습니다.예를 들어 당신이 생성하고 싶을 때dynamic component와 함께component factoryalert component오류가 있을 때만 나타날 수 있고 에도 언급하지 않을 수 있습니다.

자, 여기 각도는 선언 배열에 자동으로 도달하지 않습니다.그것은 단순히 그렇게 하지 않습니다.당신은 그것에 대해 불평할 수 있습니다.여전히 그렇습니다.

대신 이 경우 경고 구성 요소를 특정 위치에 생성해야 하며 기본적으로 이를 위해 각을 준비해야 한다는 점을 의도적으로 알려야 합니다.

일반적으로 각도는 구성 요소를 찾을 때 이 생성을 준비합니다.template 니면아로.rout config하지만 우리의 경우 위에서 언급한 두 가지 중 어느 것도 하지 않았기 때문에 각은 스스로 준비하지 못할 것입니다.

는 그 위해 .Ngmodule 외에declarations import등등. 그 은 그재은입니다.entry components 요소에는 구요소 배유열만최 없이 만 해당됩니다.routs또는selectors.

9의 은 여러분을 이 , 은 Angular 9, 이든당의고졌, ▁but▁do▁▁you▁for,▁not▁to다▁these니,▁made▁work없▁all,▁the▁9▁9습그▁there러▁scenes▁you▁angular가필▁of의▁the▁launch요▁with언당▁and▁it▁does▁behind신▁changes할그급은을나것▁angular▁were,로이entry components더 이상 수동으로.

학점--막시밀리안 슈바르츠뮐러의 Udemy 코스 "Angular the Complete Guide"에서 이러한 개념을 배웠습니다.

항목 구성요소는 Angular가 필수적으로 로드하는 모든 구성요소입니다. 즉, 유형별로 템플릿에서 참조하지 않습니다.예:

@Component({
  selector: 'app-entry-component', // <== component select tags
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppEntryComponent {
  // <== Component Class
}

사용 중인 구성 요소에 이 선택기 추가

<app-entry-component></app-entry-component>

앱 모듈에 이 구성 요소 추가

const routes: Routes = [
  {
    path: '',
    component: ComponentClassName,
    children: []
  }
]

마침내.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    AppEntryComponent
  ]
})
export class AppModule { }

언급URL : https://stackoverflow.com/questions/43815995/what-is-the-difference-between-declarations-and-entrycomponents