Let's say you want to rending some component based on condition, for example a Tabs component. Inside tabs, you want to render different tab component:

<div *ngFor="let comp of comps">
<ng-container *ngComponentOutlet="comp"></ng-container>
</div>

Generate three components by using CLI:

ng g c one
ng g c two
ng g c three

Add those componets into 'entryComponents' & 'declarations':

@NgModule({
declarations: [
AppComponent,
OneComponent,
TwoComponent,
ThreeComponent
],
imports: [
BrowserModule,
],
entryComponents: [
OneComponent,
TwoComponent,
ThreeComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Then we can assign those components to 'comps' variable in app.component.ts:

  comps: any[] = [
OneComponent,
TwoComponent,
ThreeComponent
];

We can also rendering other componets form other modules, not necessary to be in the same module, we can generate a module and a component:

ng g m other
ng g c my --module other

Here we generate a 'OtherModule' and 'MyComponent' in OtherModule.

Using 'ngModuleFactory' to tell from which module you want to import the component:

<ng-container *ngComponentOutlet="OtherModuleComponent;
ngModuleFactory: myModule;"></ng-container>

We need to import 'OtherModule':

@NgModule({
declarations: [
AppComponent,
OneComponent,
TwoComponent,
ThreeComponent
],
imports: [
BrowserModule,
OtherModule
],
entryComponents: [
OneComponent,
TwoComponent,
ThreeComponent
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Then in 'OtherModule', we need to add 'MyComponent' into 'entryComponents' & 'declarations':

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my/my.component'; @NgModule({
declarations: [MyComponent],
imports: [
CommonModule
],
entryComponents: [
MyComponent
]
})
export class OtherModule { }

Now back to app.component.ts, we can declare:

import { Component, NgModuleFactory, Compiler } from '@angular/core';
import { MyComponent } from './other/my/my.component';
import { OtherModule } from './other/other.module'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
OtherModuleComponent = MyComponent;
myModule: NgModuleFactory<any>; constructor(compiler: Compiler) {
this.myModule = compiler.compileModuleSync(OtherModule);
} }

We need to inject 'Compiler' from @angular/core module, it helps to compile the module, so that we are able to get 'MyComponent' from 'OtherModule'.

That's it!

Doc

[Angular] Dynamic component rendering by using *ngComponentOutlet的更多相关文章

  1. [Angular] Dynamic component's instance and sorting

    After create a component dynamic, we are able to change the component's props and listen to its even ...

  2. [Angular 2] Component relative paths

    Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component ...

  3. angular 引入 component 报错

    每天抽出一些时间学习 Angular2 ,并准备把手头上的项目移植为 Angular2 , 不过今天又遇到了一些小问题. 准备写一个导航类适于管理后台常见的右边导航,如博客园的这种: ! 使用 g g ...

  4. [Angular] Test component template

    Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...

  5. Vue dynamic component All In One

    Vue dynamic component All In One Vue 动态组件 vue 2.x https://vuejs.org/v2/guide/components-dynamic-asyn ...

  6. [Angular Unit Testing] Debug unit testing -- component rendering

    If sometime you want to log out the comonent html to see whether the html render correctly, you can ...

  7. angular2 学习笔记 ( Dynamic Component 动态组件)

    更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...

  8. [Unit Testing] Angular Test component with required

    export default (ngModule) => { describe('Table Item component', () => { let $compile, directiv ...

  9. angular—— Dynamic Templates

    原文:http://davidcai.github.io/blog/posts/router-dynamic-templates/ ui-router : templateProvider vs te ...

随机推荐

  1. Avito Cool Challenge 2018:C. Colorful Bricks

    C. Colorful Bricks 题目链接:https://codeforces.com/contest/1081/problem/C 题意: 有n个横向方块,一共有m种颜色,然后有k个方块的颜色 ...

  2. Kali安装到移动硬盘或者U盘中~Linux系通用方法(包括Android)

    0.1.保证这个服务必须启动(虚拟机服务最好都启动) 0.2.看看U盘接口类型是否对应 1.安装第一步 2.安装第二步,选择kali镜像 3.设置存放位置(上面的名字无所谓,最后不会用它的,虚拟机只是 ...

  3. panel(NOIP模拟赛Round 4)

    好吧,,这道题..本来以为挺难的.打了个暴力bfs+hash(期望得分30,实际得分30) 奇特的是,这道题如果不用hash(期望得分20,实际得分100),好吧数据实在是太水了(不会T吗?) 然后我 ...

  4. BEE网站

    http://www.bee-framework.com/ http://syxiaqj.github.io/2014/02/28/bee-learning-1/#0-tsina-1-24637-39 ...

  5. 关于SpringMVC的全局异常处理器

    近几天又温习了一下SpringMVC的运行机制以及原理 我理解的springmvc,是设计模式MVC中C层,也就是Controller(控制)层,常用的注解有@Controller.@RequestM ...

  6. python每日一类(1):pathlib

    每天学习一个python的类(大多数都是第三方的),聚沙成金. -------------------------------------------------------------------- ...

  7. 贪心+数学【p3156】 [CQOI2011]分金币 ([HAOI2008]糖果传递)

    题目描述 圆桌上坐着n个人,每人有一定数量的金币,金币总数能被n整除.每个人可以给他左右相邻的人一些金币,最终使得每个人的金币数目相等.你的任务是求出被转手的金币数量的最小值. 分析: 设: 每个人最 ...

  8. 洛谷——P1029 最大公约数和最小公倍数问题

    P1029 最大公约数和最小公倍数问题 题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1 ...

  9. python全栈开发- day14列表推导式、生成器表达式、模块基础

    一.列表推导式 #1.示例 数据量小 egg_list=[] for i in range(10): egg_list.append('鸡蛋%s' %i) egg_list=['鸡蛋%s' %i fo ...

  10. lua取随机数

    do local a = string.reverse(os.time()) print(a) math.randomseed(a) -- math.randomseed(os.time()) for ...