Angular 声明和entryComponents之间有什么区别

Angular 声明和entryComponents之间有什么区别,angular,Angular,我的app.module.ts中有以下内容: 从'@angular/platform browser'导入{BrowserModule}; 从'@angular/core'导入{ErrorHandler,NgModule}; 从'@angular/Http'导入{HttpModule,Http}; 从“离子角度”导入{IonicApp,IonicErrorHandler,IonicModule}; 从“../shared/shared”导入{EliteApi}; 从“./app.componen

我的app.module.ts中有以下内容:

从'@angular/platform browser'导入{BrowserModule};
从'@angular/core'导入{ErrorHandler,NgModule};
从'@angular/Http'导入{HttpModule,Http};
从“离子角度”导入{IonicApp,IonicErrorHandler,IonicModule};
从“../shared/shared”导入{EliteApi};
从“./app.component”导入{MyApp};
从“../pages/pages”导入{MyTeams,tournames,TeamDetails,Teams,TeamHome,Standings};
从'@ionic native/status bar'导入{StatusBar};
从'@ionic native/SplashScreen'导入{SplashScreen};
@NGD模块({
声明:[
MyApp,
我的团队,
团队详细信息,
比赛,
团队,
家庭队,
排名
],
进口:[
浏览器模块,
IonicModule.forRoot(MyApp),
HttpModule
],
引导:[IonicApp],
入口组件:[
MyApp,
我的团队,
团队详细信息,
比赛,
团队,
家庭队,
排名
],
供应商:[
HttpModule,
状态栏,
飞溅屏幕,
{提供:ErrorHandler,useClass:IonicerHandler},
精英派
]
})
导出类AppModule{}
目前,我的
声明
入口组件
都是完全相同的。它们包含我为我的应用程序构建的所有页面/组件。如果从任何属性中删除任何条目,则angular2中会出现错误


我的问题是,如果它们总是相同的,那么这些属性需要什么?我想我肯定错过了一些要点。entryComponents和Declarations什么时候会彼此不同?

使用
entryComponents
数组仅定义在html中找不到并使用
ComponentFactoryResolver
动态创建的组件。Angular需要此提示才能找到它们并进行编译。所有其他组件都应该列在声明数组中


补充了@Julia对这个问题的回答。我想添加模态的用例


比方说,您有一个名为
ModalComponent
的组件。为了使其更具可重用性,您希望传递一个组件名称,并期望该组件在
ModalComponent
*中呈现

示例
module.ts
类似于:

import:[ModalModule],  // As a best practice, we can create Modal as a separate Feature
entryComponent : [TheCompYouWantToRenderInsideModalComponent]
我们将把
组件作为
entryComponent
传递给RenderingDomainModalComponent
,因为该组件在编写网站代码时不存在(,即在任何
HTML
文件中都不会有
组件的选择器)。我们将把这个
组件
传递给model,然后当model打开时,它将被动态呈现。如下所示:

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

*在
ModalModule
中,我们将创建使用
ComponentFactoryResolver
的服务,并将
组件想要渲染的idemodalComponent
作为参数。稍后,我们可以调用一个函数(称之为
openModal(componentType:componentType)
),该函数将使用
ComponentFactoryResolver


旁注:出于同样的目的,
入口组件也将在Angular V6
元素
功能中发挥重要作用

更新:角度9


随着
Angular 9
的发布,我们不再需要
entryComponent
,多亏了Ivy编译器

简言之:

entryComponents
的存在背后的“真正”原因是树抖动,而
声明的存在主要是为了模块封装。因此,它们甚至不具有可比性。如果树摇晃不是我们所关心的,那么我们最好将声明作为两者的单一来源

更长的答案

您在
模块
中创建的所有
组件
不会转到最终捆绑包。相反,仅使用
选择器在
模板中声明的组件,或添加到
entryComponents
数组中的
组件(由您或框架)

您可能希望在动态创建组件时添加组件,就像使用accepted answer中所述的
ComponentFactoryResolver
。或框架可以在您在路由数组中声明组件时或在其他命令创建过程中添加组件

从官方文件:

事实上,许多库声明和导出您永远无法使用的组件 使用。例如,材质设计库将导出所有零部件 因为它不知道你会用哪个。然而,事实并非如此 不太可能你会全部使用它们。对于那些你没有提到的, 摇树器从最终的代码包中删除这些组件

如果组件不是入口组件,并且在模板中找不到, 摇树机会把它扔掉。因此,最好只添加 真正的入门级组件,帮助您的应用保持 尽量修剪


条目组件是任何必须进行角度加载的组件,这意味着您没有在模板中按类型引用它。 例如:

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

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

对于显式启用了常春藤的角度9或角度8


不再需要带常春藤的入门级组件,现在不推荐使用了

,为此,您需要了解实际角度有多大 在创建组件时,在幕后工作。

您计划使用的任何组件以及指令和管道,都需要将它们添加到
app.module.ts
@NgModule
中的
声明
数组中(同时使用多个
const routes: Routes = [
  {
    path: '',
    component: ComponentClassName,
    children: []
  }
]
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    AppEntryComponent
  ]
})
export class AppModule { }