[Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer
By default, when you generate components, they will simply be added to the page in order, one after another. Angular 2 provides methods on the ViewContainer that allow you to reorder components once they’ve been created and provide the order that you want.
When you want to create a component and insert it at cetern position of the list. Then what you need to do is just pass in a second param, when you call 'createComponent()'.
import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Input} from '@angular/core';
import {SimpleService} from "../../serivces/simple.service";
import {WidgetThree} from "../widgets/widget-three.component"; @Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html'
})
export class HomeComponent { @ViewChild('container', {
read: ViewContainerRef
}) container; constructor(private resolver: ComponentFactoryResolver, private simpleService: SimpleService) {
} ngAfterContentInit(){
const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
this.container.createComponent(WidgetFactory);
this.container.createComponent(WidgetFactory);
this.container.createComponent(WidgetFactory);
this.container.createComponent(WidgetFactory);
const comRef = this.container.createComponent(WidgetFactory); // return a componentRef
comRef.instance.message = "I am last"; // using componentRef's instance prop to access the component prop
comRef.instance.renderer.setElementStyle(
comRef.instance.input.nativeElement,
'color',
'red'
)
} onClick(){
const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
const comRef = this.container.createComponent(WidgetFactory, );
comRef.instance.message = "I am third";
} }
So when click a button, we wil call 'onClick()' method, which will create a new component and insert it at the third place in the list.
[Angular 2] Order Dynamic Components Inside an Angular 2 ViewContainer的更多相关文章
- Angular 个人深究(一)【Angular中的Typescript 装饰器】
Angular 个人深究[Angular中的Typescript 装饰器] 最近进入一个新的前端项目,为了能够更好地了解Angular框架,想到要研究底层代码. 注:本人前端小白一枚,文章旨在记录自己 ...
- 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文重点介绍Angular的开发.编译工具:npm, yarn, Angular CLI,它们就像Java在中的Maven,同时顺便介 ...
- (转载)从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
本系列从Java程序员的角度,带大家理解前端Angular框架. 本文是入门篇.笔者认为亲自动手写代码做实验,是最有效最扎实的学习途径,而搭建开发环境是学习一门新技术最需要先学会的技能,是入门的前提. ...
- [Vue @Component] Switch Between Vue Components with Dynamic Components
A common scenario is to present different components based on the state of the application. Dynamic ...
- angular.module()创建、获取、注册angular中的模块
// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...
- Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目
前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...
- vue & dynamic components
vue & dynamic components https://vuejs.org/v2/guide/components-dynamic-async.html keep-alive htt ...
- [Angular] Dynamic components with ComponentFactoryResolver
To create a component dynamicly. 1. Add a container with ref: @Component({ selector: 'app-root', tem ...
- [Angular 2] Set Properties on Dynamically Created Angular 2 Components
When you generate Angular 2 components, you’re still able to access the component instance to set pr ...
随机推荐
- js 判断字符是否以汉字开头
javascript代码如下: var re = new RegExp("^[\u4e00-\u9fa5]"); if (re.test("aaa好")) { ...
- ansible playbook最佳实践
本篇主要是根据官方翻译而来,从而使简单的翻译,并没有相关的实验步骤,以后文章会补充为实验步骤,此篇主要是相关理论的说明,可以称之为中文手册之一,具体内容如下: Ansible playbooks最佳实 ...
- To follow the path
look to the master, follow the master, walk with the master, see through the master, bec ...
- php--opp--2.什么是类,什么是对象,类和对象这间的关系
类的概念:类是具有相同属性和服务的一组对象的集合.它为属于该类的所有对象提供了统一的抽象描述,其内部包括属性和服务两个主要部分.在面向对象的编程语言中,类是一个独立的程序单位,它应该有一个类名并包括属 ...
- c++builder CryptoAPI md5
#include <wincrypt.h> DWORD GetHash( CONST BYTE * pbData, DWORD dwDataLen, ALG_ID algId, LPTST ...
- VMare中安装“功能增强工具”,实现CentOS5.5与win7host共享文件夹的创建
读者如要转载,请标明出处和作者名,谢谢. 地址01:http://space.itpub.net/25851087 地址02:http://www.cnblogs.com/zjrodger/ 地址03 ...
- windows 无法启动asp.net 状态服务 错误 0x8007277a
处理方法:如果在启动ASP.NET State Service服务时遇到问题0x8007277a即无法启动或初始化,请尝试在命令行(CMD)中输入netsh winsock reset(有可能是wi ...
- [翻译]Behavior-Driven Development (BDD)行为驱动开发(二)
测试驱动开发体现了开发人员对软件产品各部分运作方式的理解,而行为驱动开发则关注于开发人员对软件产品最终表现的行为的预期. 行为驱动开发 TDD更像是一种范式而不是一个过程.它描述了一种先编写测试,然后 ...
- java线性表学习笔记(一)
线性表是一种按顺序储存数据是的常用结构,大多数的线性表都支持以下的典型操作: 从线性表提取插入删除一个数据: 找出线性表中的某一个元素: 找出线性表中的元素: 确定线性表中是否包含某一个元素,确定线性 ...
- AJAX小练习,防止以后忘记
<div id="content"> <input id="btnShow" type="button" value=&q ...