angular2 笔记

时间:2022-10-20 07:47:59

动态添加一个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 笔记的更多相关文章

  1. Angular2笔记:NgModule

    Angular的模块的目的是用来组织app的逻辑结构. 在ng中使用@NgModule修饰的class就被认为是一个ng module.NgModule可以管理模块内部的Components.Dire ...

  2. angular2自学笔记---官网项目(一)

    1.单向数据绑定的'插值表达式' angular中最典型的数据显示方式:把HTML模板(template)的控件绑定到angular组件的属性(component相当于一个构造函数,下面例子中的这个构 ...

  3. angular2 学习笔记 &lpar; rxjs 流 &rpar;

    RxJS 博大精深,看了好几篇文章都没有明白. 范围牵扯到了函数响应式开发去了... 我对函数式一知半解, 响应式更是第一次听到... 唉...不过日子还是得过...混着过先呗 我目前所理解的很浅,  ...

  4. angular2 学习笔记 &lpar; ngModule 模块 &rpar;

    2016-08-25, 当前版本是 RC 5. 参考 : https://angular.cn/docs/ts/latest/guide/ngmodule.html 提醒 : 这系列笔记的 &quot ...

  5. Angular2之路由学习笔记

    目前工作中项目的主要技术栈是Angular2 在这里简单记录一下遇到的问题以及解决方案. 这篇笔记主要记录Angular2 的路由. 官方文档链接:https://angular.cn/docs/ts ...

  6. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  7. Angular2开发笔记

    Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...

  8. Angular2学习笔记——路由器模型(Router)

    Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...

  9. Angular2学习笔记——Observable

    Reactive Extensions for Javascript 诞生于几年前,随着angular2正式版的发布,它将会被更多开发者所认知.RxJs提供的核心是Observable对象,它是一个使 ...

随机推荐

  1. iOS---SQLite数据库框架之FMDB -Swift

    SQLite数据库框架之FMDB 什么是FMDB? FMDB是iOS平台的SQLite数据库框架,FMDB以OC的方式封装了SQLite的C语言API.对比苹果自带的Core Data框架,更加轻量级 ...

  2. &lt&semi;转&gt&semi;SFTP 和FTPS的区别是什么?

    SFTP 和FTPS都是为ftp连接加密,协议非常相似. 一个是借助ssl协议加密,一个时借助ssh加密. ssl是为http/smtp等加密设计的,ssh是为telnet/ftp等加密.建立传输通道 ...

  3. htm初学笔记

    一.什么是html HTML(HyperText Markup Language):超文本标记语言,一种纯文本类型的语言 --使用带有尖括号的“标记”将网页中的内容逐一标识出来 用来设计网页的标记语言 ...

  4. object-c中的BOOL类型

    object-c中的布尔类型比C语言中的bool类型早了10年,它具有YES和NO两种值.在object-c中的布尔类型BOOL实际上是一种带符号的字符类型(signed char),它使用的空间是1 ...

  5. 【多线程】-ThreadPool线程池

    ThreadPool介绍: Thread类是一个静态类,所有不存在实例化构造函数操作,直接可以调用其内所存在的方法. 微软官网给出的解释: 提供一个线程池,该线程池可用于执行任务.发送工作项.处理异步 ...

  6. 预置app&sol;apk到系统 &amp&semi;&amp&semi; 预置so库进系统 &amp&semi;&amp&semi; 预置普通文件和文件夹进系统

    https://blog.csdn.net/zhandoushi1982/article/details/4695460

  7. windows server 2008 r2安装windows media player

    1.打开“服务器管理器”: 2.依次单击“功能” →  “添加功能”: 3.勾选“桌面体验”和“优质Windows音频视频体验”: 4.单击“安装”按钮:安装完毕,根据提示重新启动计算机即可.

  8. HTML5 播放器

    之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...

  9. Java 使用Jedis连接Redis数据库(-)

    redis 安装: Linux 安装redis 1)下载jar包: 使用Jedis需要以下两个jar包: jedis-2.8.0.jar commons-pool2-2.4.2.jar 2)测试red ...

  10. socket domain 样例

    服务端 #include<stdio.h> #include <sys/stat.h> #include <sys/socket.h> #include <s ...