<elementRef>

import {ElementRef} from "@angular/core";

constructor(private element: ElementRef) {
   // now, we can reference to: this.element
}

this.element.nativeElement('.js-banner-container'),

ElementRef

Provides access to the underlying native element (DOM element).

import {AfterContentInit, Component, ElementRef} from '@angular/core';

@Component({
selector: 'app',
template: `
<h1>My App</h1>
<pre style="background: #eee; padding: 1rem; border-radius: 3px; overflow: auto;">
<code>{{ node }}</code>
</pre>
`
})
export class App implements AfterContentInit {
node: string; constructor(private elementRef: ElementRef) {
} ngAfterContentInit() {
const tmp = document.createElement('div');
const el = this.elementRef.nativeElement.cloneNode(true); tmp.appendChild(el);
this.node = tmp.innerHTML;
} }

参考这篇 Angular 2: @Directive() 指令创建无限滚动

DOM in Angular2的更多相关文章

  1. Angular2新人常犯的5个错误

    看到这儿,我猜你肯定已经看过一些博客.技术大会录像了,现在应该已经准备好踏上angular2这条不归路了吧!那么上路后,哪些东西是我们需要知道的? 下面就是一些新手常见错误汇总,当你要开始自己的ang ...

  2. Angular2学习笔记(1)

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

  3. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  4. Angular2开发笔记

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

  5. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  6. 最新Angular2案例rebirth开源

    在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...

  7. angular2系列教程(五)Structural directives、再谈组件生命周期

    今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, n ...

  8. angular2系列教程(四)Attribute directives

    今天我们要讲的是ng2的Attribute directives.顾名思义,就是操作dom属性的指令.这算是指令的第二课了,因为上节课的components实质也是指令. 例子

  9. angular2系列教程(三)components

    今天,我们要讲的是angualr2的components. 例子

随机推荐

  1. 在 Ubuntu 16.04 中安装谷歌 Chrome 浏览器

    进入 Ubuntu 16.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 也可以按下 Win 键(或叫 Super 键),在 Dash 的搜索框中输入 terminal 或&q ...

  2. 巧用selectKey

    在Ibatis中,insert()的返回值为一个Object的主键,其实这个Object的主键是这样的来的:如果在bean的xml文件中设置了插入的keyProperty,则insert()方法返回的 ...

  3. MidPayinfoVO

    package nc.vo.arap.payablebill; import nc.vo.pub.SuperVO; import nc.vo.pub.lang.UFDate; import nc.vo ...

  4. 多个html编辑器在同一页面加载

    http://127.0.0.1:3750/test.aspx 下载:ckfinder,ckeditor编辑器 <script type="text/javascript" ...

  5. Mysql的联合查询

    联合查询 union联合查询 语法:     select 语句 union [all|distinct] select 语句; 示例: 特点:     条件:两表的查询出来的字段数目必须相同     ...

  6. 关于atoi的实现

    一.关于atoi atol的实现 __BEGIN_NAMESPACE_STD __extern_inline double __NTH (atof (__const char *__nptr)) { ...

  7. 【转载】TCP协议疑难杂症全景解析

    说明: 1).本文以TCP的发展历程解析容易引起混淆,误会的方方面面2).本文不会贴大量的源码,大多数是以文字形式描述,我相信文字看起来是要比代码更轻松的3).针对对象:对TCP已经有了全面了解的人. ...

  8. python 自动化之路 day 04

    内容目录: 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 4.嵌套函数 5.递归 6.匿名函数 7.函数式编程介绍 8.高阶函数 9.内置函数 1.函数基本语法及特性 背景提要 现在老 ...

  9. starling 中 的特效

    一. 最好用同一张图片进行缩放变形等处理后组合,这样可以每帧一draw

  10. 队列(顺序存储)C++模板实现

    队列:一端进行插入,另一端进行删除的线性结构,具有先进先出性.利用数组来实现队列将面临"假溢出"的情况,如下图所示: front:永远指向队首元素,队首在本文中是允许删除元素的一端 ...