资讯专栏INFORMATION COLUMN

ngModule中的entryComponents是什么?

wenyiweb / 544人阅读

摘要:中的是什么教程一安装和配置我正在研究依赖于的应用程序。入口组件是根据类型强制加载的任何组件。然后创建组件的表示并将其插入选定元素的中。确实,它的选择符匹配中的元素标记。路由定义中的组件也是条目组件。路径定义是指按其类型的组件。

ngModule中的entryComponents是什么?

ionic3 教程(一)安装和配置
我正在研究依赖于2的Ionic3应用程序。 所以纳入了新的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在这里做什么?

entryComponents在这里做什么? 组件已经在声明中定义。 那么有什么需要重复呢? 如果我不在这里包含组件,会发生什么?
回答:
Angular使用entryComponents来启用“树震动”,即只编译项目中实际使用的组件,而不是编译所有在ngModule中声明但从未使用的组件

这是用ViewContainerRef.createComponent()添加的动态添加的组件。将它们添加到entryComponents告诉脱机模板编译器编译它们并为它们创建工厂。

路由配置中注册的组件也自动添加到entryComponents,因为router-outlet也使用ViewContainerRef.createComponent()将路由组件添加到DOM。

离线模板编译器(OTC)只生成实际使用的组件。如果组件不直接用于模板,OTC不知道是否需要编译。有了entryComponents,你可以告诉OTC也编译这些组件,以便在运行时可用。

什么是入口组件? (angular.io)

NgModule文档(angular.io)

定义这个组件时定义应该被编译的组件。对于此处列出的每个组件,Angular将创建一个ComponentFactory并将其存储在ComponentFactoryResolver中。
如果你没有给entryComponents列出一个动态添加的组件,你会得到一个错误消息,因为Angular没有创建一个。

另见https://angular.io/docs/ts/la...

你不会比Angular文档得到更好的解释。
以下是角度文档的解释。

入口组件是根据类型强制加载的任何组件。
通过它的选择器声明式加载的组件不是一个入口组件。

大多数应用程序组件是声明式加载的。 Angular使用组件的选择器来定位模板中的元素。然后创建组件的HTML表示并将其插入选定元素的DOM中。这些不是条目组件。
一些组件只能动态加载,并不会在组件模板中引用

引导的根AppComponent是一个入口组件。确实,它的选择符匹配index.html中的元素标记。但是index.html不是组件模板,AppComponent选择器不匹配任何组件模板中的元素。

动态加载AppComponent,因为它是按照@ NgModule.bootstrap中的类型列出的,或者是通过模块的ngDoBootstrap方法强制性地加载。

路由定义中的组件也是条目组件。路径定义是指按其类型的组件。路由器忽略路由组件的选择器(如果它有一个),并动态地将组件加载到RouterOutlet中。
编译器无法通过在其他组件模板中查找这些条目组件来发现这些条目组件。您必须通过将它们添加到entryComponents列表来告诉它们。

Angular会自动将以下类型的组件添加到模块的entryComponents中:

@ NgModule.bootstrap列表中的组件。
路由器配置中引用的组件。
您不必明确提及这些组件,虽然这样做是无害的。

传送门:myBlog entryComponents

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90015.html

相关文章

  • angular2 NgModel` 模块

    摘要:模块在中一个指的是使用修饰的。中没有模块级别的,所有在中声明的都是注册在根级别的中导入其他,其它暴露的出的等可以在本的组件中被使用。导入一个并不意味着会自动导入这个内部导入的所暴露出的公共成员。 angular2 NgModel 模块 在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和...

    OnlyLing 评论0 收藏0
  • [译] 关于 Angular 依赖注入你需要知道的

    摘要:注入器树大多数开发者知道,会创建根注入器,根注入器内的服务都是单例的。也会被添加到这个根注入器对象内,它主要用来创建动态组件,因为它存储了属性指向的组件数组。为了理解依赖解析算法,我们首先需要知道视图和父视图元素概念。 What you always wanted to know about Angular Dependency Injection tree showImg(https...

    Edison 评论0 收藏0
  • [译] 关于 Angular 动态组件你需要知道的

    摘要:第一种方式是使用模块加载器,如果你使用加载器的话,路由在加载子路由模块时也是用的作为模块加载器。还需注意的是,想要使用还需像这样去注册它你当然可以在里使用任何标识,不过路由模块使用标识,所以最好也使用相同。 原文链接:Here is what you need to know about dynamic components in Angular showImg(https://se...

    lcodecorex 评论0 收藏0
  • [译] 别再对 Angular Modules 感到迷惑

    摘要:大多数初学者会认为也有封装规则,但实际上没有。第二个规则是最后导入模块的,会覆盖前面导入模块的。 原文链接:Avoiding common confusions with modules in Angular showImg(https://segmentfault.com/img/remote/1460000015298243?w=270&h=360); Angular Modul...

    LMou 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<