动态添加一个component:
import {
ViewContainerRef,
Component,
ComponentFactoryResolver,
ViewChild
} from '@angular/core';
import {InstanceComponent} from ' ./ instance.component'; @Component{
selector:'my-app'
template:`
<div #insert>
insert Component
</div>
`
} export class AppComponent{
@ViewChild('insert',{read:ViewContainerRef})insert;
constructor(
private _vcr:ViewContainerRef
private _cfr:ComponentFactoryResolver
){}
ngAfterViewInit(){
let factory=this._cfr.resolveComponentFactory(InstanceComponent); //先转换成factoryComponent类型。
this._vcr.createComponent(factory); // 在本component末尾加入factory;
//或者this.insert.createComponent(factory); // 在#insert内部的末尾加入factory;
}
clear(){
this._cfr.clear() //清除加入的元素。
}
remove(){ //既然有加入component,那么也得写一个删除的方法。
let node=this.insert.nativeElement;
node.parentNode.removeChild(node);
} }
angular中的NgModule中存在entryComponents属性,一般是不需要配置的。因为被bootStrap直接及递归引导的component和router中定义的component,会被自动添加入entryComponent。
可是我们要加入的这个component,就没有落脚之地,所以你需要自己在app.module中的entryComponents里加入这个component。
下面是一些API:
一,
@ViewChild:
@ViewChild('insert',{read:_params});
_params:默认值为ElementRef;另一个可选值为ViewContainer;
@ViewChildren:
在@ViewChild中填入component,难免该component不止被使用一次。所以在多次出现时,使用viewChildren;
@ContentChild:
首先你得分清content与view的差别。他们所对应的元素,view是在native element中定义,content是在host element中定义再映射入native中。
@ContentChild(component) ;获得projection component;
@ContentChildren:
相对于ContentChild选择多个。
使用进阶:
@Directive({
selector:'div',
})export class myDirective{
constructor(
private el:ElementRef;
){}
} @Component ({
template:`
<div id='div1'> one</div>
<div> two </div>
`
})export class AppComponent{
@ViewChildren(myDirective)_md;
ngAfterView(){
this._md.map(node=>{
console.log(node.el.nativeElement.nodeName);
});
this._md.changes.subscribe(val=>{.....}); }
}
@ViewChildren返回一个:QueryList。拥有map方法,但它不属于Array。
myDirective将<div>绑定为一个Directive,并使其具有.el属性。其中第一个div多带一个id属性。注意,不做injector或者attr,将返回一个空的{}。
this._md.changes可以监听这些ViewChildren的变化,比如add,move,remove.
@ContentChildren。使用方法雷同。
二,动态 innerHTML。
ViewContainerRef.createEmbeddedView
@Component ({
template:`
<template #tp>
<h1> templateRef</h1>
</template>
` })export class AppComponent{
@ViewChild('tp')tp;
constructor(private _vcr:ViewContainerRef){};
ngAfterViewInit(){ this._vcr.createEmbeddedView(tp);
} }
@ViewChild('tp')得到的是一个templateRef;
通过这个方法,可以达成类似Jquery 中,$('<h1> templateRef</h1>').insertAfter('my-app')的效果。
三,私有注入。
ViewProviders:[];
angular中除了惰性模块,一旦你使用providers注册服务,那它会立即提升为全局。
所以在一些特殊情况需要私有服务时,我们使用ViewProviders代替providers,因为ViewProviders内的服务,只能被自身及ViewChildren使用。
------------这个排版不好用啊。有时间自己搞几个class。。。- -!
angular2 笔记的更多相关文章
-
Angular2笔记:NgModule
Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Dire ...
-
angular2自学笔记---官网项目(一)
1.单向数据绑定的'插值表达式' angular中最典型的数据显示方式:把HTML模板(template)的控件绑定到angular组件的属性(component相当于一个构造函数,下面例子中的这个构 ...
-
angular2 学习笔记 ( rxjs 流 )
RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅, ...
-
angular2 学习笔记 ( ngModule 模块 )
2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 " ...
-
Angular2之路由学习笔记
目前工作中项目的主要技术栈是Angular2 在这里简单记录一下遇到的问题以及解决方案. 这篇笔记主要记录Angular2 的路由. 官方文档链接:https://angular.cn/docs/ts ...
-
Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
-
Angular2开发笔记
Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...
-
Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
-
Angular2学习笔记——Observable
Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使 ...
随机推荐
-
iOS---SQLite数据库框架之FMDB -Swift
SQLite数据库框架之FMDB 什么是FMDB? FMDB是iOS平台的SQLite数据库框架,FMDB以OC的方式封装了SQLite的C语言API.对比苹果自带的Core Data框架,更加轻量级 ...
-
<;转>;SFTP 和FTPS的区别是什么?
SFTP 和FTPS都是为ftp连接加密,协议非常相似. 一个是借助ssl协议加密,一个时借助ssh加密. ssl是为http/smtp等加密设计的,ssh是为telnet/ftp等加密.建立传输通道 ...
-
htm初学笔记
一.什么是html HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言 --使用带有尖括号的“标记”将网页中的内容逐一标识出来 用来设计网页的标记语言 ...
-
object-c中的BOOL类型
object-c中的布尔类型比C语言中的bool类型早了10年,它具有YES和NO两种值.在object-c中的布尔类型BOOL实际上是一种带符号的字符类型(signed char),它使用的空间是1 ...
-
【多线程】-ThreadPool线程池
ThreadPool介绍: Thread类是一个静态类,所有不存在实例化构造函数操作,直接可以调用其内所存在的方法. 微软官网给出的解释: 提供一个线程池,该线程池可用于执行任务.发送工作项.处理异步 ...
-
预置app/apk到系统 &;&; 预置so库进系统 &;&; 预置普通文件和文件夹进系统
https://blog.csdn.net/zhandoushi1982/article/details/4695460
-
windows server 2008 r2安装windows media player
1.打开“服务器管理器”: 2.依次单击“功能” → “添加功能”: 3.勾选“桌面体验”和“优质Windows音频视频体验”: 4.单击“安装”按钮:安装完毕,根据提示重新启动计算机即可.
-
HTML5 播放器
之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...
-
Java 使用Jedis连接Redis数据库(-)
redis 安装: Linux 安装redis 1)下载jar包: 使用Jedis需要以下两个jar包: jedis-2.8.0.jar commons-pool2-2.4.2.jar 2)测试red ...
-
socket domain 样例
服务端 #include<stdio.h> #include <sys/stat.h> #include <sys/socket.h> #include <s ...