[Angular] Dynamic component rendering by using *ngComponentOutlet
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!
[Angular] Dynamic component rendering by using *ngComponentOutlet的更多相关文章
- [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 ...
- [Angular 2] Component relative paths
Oingial aritial --> Link Take away: import { Component, OnInit } from '@angular/core'; @Component ...
- angular 引入 component 报错
每天抽出一些时间学习 Angular2 ,并准备把手头上的项目移植为 Angular2 , 不过今天又遇到了一些小问题. 准备写一个导航类适于管理后台常见的右边导航,如博客园的这种: ! 使用 g g ...
- [Angular] Test component template
Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...
- Vue dynamic component All In One
Vue dynamic component All In One Vue 动态组件 vue 2.x https://vuejs.org/v2/guide/components-dynamic-asyn ...
- [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 ...
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- [Unit Testing] Angular Test component with required
export default (ngModule) => { describe('Table Item component', () => { let $compile, directiv ...
- angular—— Dynamic Templates
原文:http://davidcai.github.io/blog/posts/router-dynamic-templates/ ui-router : templateProvider vs te ...
随机推荐
- 《c程序设计语言》读书笔记-5.5-指针实现strncpy,strncat,strncmp
#include <stdio.h> #include <math.h> #include <stdlib.h> #include <string.h> ...
- Dinic算法学习&&HDU2063
http://www.cnblogs.com/SYCstudio/p/7260613.html 看这篇博文懂了一点,做题再体会体会吧 找了好久都没找到一个好用的模板…… 我也是佛了..最后决定用峰神的 ...
- 自定义View Draw过程(4)
目录 目录 1. 知识基础 具体请看我写的另外一篇文章:自定义View基础 - 最易懂的自定义View原理系列 2. draw过程作用 绘制View视图 3. draw过程详解 同measure.la ...
- php 计算函数执行时间的方法及获得微妙的方法
// 获得微妙方法 function getMillisecond() { list($s1, $s2) = explode(' ', microtime()); return (float)spri ...
- VMWare虚拟机如何与主机共享文件夹(最容易看懂的讲解)附图~
http://wenku.baidu.com/view/54ab9e19227916888486d776.html 新建好虚拟机并安装好系统后,在编辑虚拟机设置--选项进行以下设置: 点添加 选择你要 ...
- ios 最新系统bug与解决——微信公众号中弹出键盘再收起时,原虚拟键盘位点击事件无效
最近ios发布新版本系统12.1,随着部分用户的系统更新,一些问题也渐渐暴露出来... 公司用户反映微信公众号出现了点击无效的bug!!测试调查发现,只有iphonex.iphone6,ihpone7 ...
- Linux单机安转Spark
安装Spark需要先安装jdk及安装Scala. 1. 创建目录 > mkdir /opt/spark > cd /opt/spark 2. 解压缩.创建软连接 > tar z ...
- redis集群PHP解决方案
Redis3.2.4 Cluster集群搭建 服务器环境:192.168.3.229192.168.3.193每台服务器搭建3个节点,组成3个主节点,3个从节点的redis集群. 注意:防火墙一定要开 ...
- 【转载】SQL SERVER-Delete和Truncate的区别
转载博客:http://blog.csdn.net/dba_huangzj/article/details/7913068 背景 一般在删除表数据时候,通常会有执行两个SQL语句:delete和tru ...
- Nginx虚拟主机(Virtual Host)配置
虚拟主机(Virtual Host)可以在一台服务器上绑定多个域名,架设多个不同的网站,一般在开发机或者要部署多个小网站的服务器上需要配置虚拟主机.nginx的虚拟主机配置其实也挺简单,为了使得配置文 ...