DOM in Angular2
<elementRef>
import {ElementRef} from "@angular/core";
constructor(private element: ElementRef) {
// now, we can reference to: this.element
}
this.element.nativeElement('.js-banner-container'),
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的更多相关文章
- Angular2新人常犯的5个错误
看到这儿,我猜你肯定已经看过一些博客.技术大会录像了,现在应该已经准备好踏上angular2这条不归路了吧!那么上路后,哪些东西是我们需要知道的? 下面就是一些新手常见错误汇总,当你要开始自己的ang ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Angular2开发笔记
Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- 最新Angular2案例rebirth开源
在过去的几年时间里,Angular1.x显然是非常成功的.但由于最初的架构设计和Web标准的快速发展,逐渐的显现出它的滞后和不适应.这些问题包括性能瓶颈.滞后于极速发展的Web标准.移动化多平台应用, ...
- angular2系列教程(五)Structural directives、再谈组件生命周期
今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, n ...
- angular2系列教程(四)Attribute directives
今天我们要讲的是ng2的Attribute directives.顾名思义,就是操作dom属性的指令.这算是指令的第二课了,因为上节课的components实质也是指令. 例子
- angular2系列教程(三)components
今天,我们要讲的是angualr2的components. 例子
随机推荐
- 【原】Spring与MongoDB集成:配置
MongoDB的API提供了DBObject接口来实现BSONObject的操作方法,BasicDBObject是具体实现.但是并没有提供DBObject与BeanObject的转换.在还没有了解到与 ...
- tcl/tk
http://blog.csdn.net/dulixin/article/category/365058 http://blog.csdn.net/dulixin/article/category/3 ...
- 亲测 asp.net 调用 webservice返回json
前端脚本 $("#sure").click(function () { var tbody = $("#putsigal tbody"); var trs = ...
- 第二篇、C_递归算法
简介: 在实际应用当中,我们常常会接触到一些递归的数法. 递归算法的特点 递归算法是一种直接或者间接地调用自身算法的过程.在计算机编写程序中,递归算法对解决一大类问题是十分有效的,它往往使算法的描述简 ...
- String练习
/*1,模拟一个trim方法,去除字符串两端的空格. 思路: 1,判断字符串第一个位置是否是空格,如果是继续向下判断,直到不是空格为止. 结尾处判断空格也是如此. 2, ...
- js方法的命名不能使用表单元素的名称或ID
今天在写页面的时候,遇到一个关于js方法的命名问题,先看下代码: 表单元素如下: <select name="isCulture" onchange="isCult ...
- IE兼容性问题
1.H5标签兼容.解决:js:document.createElement("footer");css:display: block;或者直接使用 html5shiv.js ...
- jQuery入门[1]-构造函数【转载】
最近看了一些jquery的进阶教程,感觉很不错,与大家分享下! jQuery——构造函数 ◦体积小(v1.2.3 15kb)◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器(IE6,F ...
- Google设计理念
Google的十大信条 我们首次拟就这“十大信条”还是在Google刚刚成立没几年的时候.此后,我们时常重新审视这份清单,看看它是否依然适用.我们希望这些信条永不过时,而您也可以监督我们是否遵守了这些 ...
- 通过bat命令批量删除VS查找历史记录
有时候我们会发现我们的VS查找下拉框里面有很多之前的搜索记录,想删除但是却没有地方删除. 网上的方法都是直接找到注册表HKEY_CURRENT_USER\Software\Microsoft\Vis ...