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. 例子
随机推荐
- android之手动安装apk到模拟器
一.将apk放到SDK的指定路径 二.打开命令行 三.安装apk到模拟器 此处遇到无法找到主机,解决办法: 发现是进程2512堵塞导致的 进入powershell 查看进程 发现2512进程是360手 ...
- WCF图片上传
WCF越来越流行,俺也在用,这是废话.项目中遇到需要图片上传,但是wcf上传会遇到一些异常,调试了N久,找了好多个解决方案才最终解决.代码直接贴上了 /// <summary> /// 笔 ...
- 【Android】关于pix,dip,dip,sp等相关概念
1.px (pixels)像素 – 是像素,就是屏幕上实际的像素点单位. dip或dp (device independent pixels)设备独立像素, 与设备屏幕有关. sp (scaled p ...
- Android——按钮的事件监听
关于Button按钮的四种事件监听方法总结 首先我们在activity_main.xml里面先定义一个Button空间 <RelativeLayout xmlns:android="h ...
- jQuery+php+ajax+PHPExcel实现上传excel文件导入数据库
项目中需要批量导入数据,感觉这个需求以后也会经常用,必须总结分享下: 引入jquery的第三方表单插件: <scripttype="text/javascript&qu ...
- ### CUDA
CUDA Learning. #@author: gr #@date: 2014-04-06 #@email: forgerui@gmail.com 1. Introduction CPU和GPU的区 ...
- iOS 返回到指定的ViewController
for (UIViewController *vc in self.navigationController.viewControllers) { if ([vc isKindOfClass:[MyV ...
- 【我们都爱Paul Hegarty】斯坦福IOS8公开课个人笔记19 为Demo添加手势
在这一话中我们将应用上一话学到的知识来为Demo添加手势识别,首先添加一个缩放的功能,其次添加一个拖动功能,使得小人的表情可以随着我们的手指改变. 首先来添加一个缩放手势的识别器,我们来到FaceVi ...
- 九度OJ 1534 数组中第K小的数字 -- 二分查找
题目地址:http://ac.jobdu.com/problem.php?pid=1534 题目描述: 给定两个整型数组A和B.我们将A和B中的元素两两相加可以得到数组C. 譬如A为[1,2],B为[ ...
- iOS中XML的相关知识
1.什么是XML “当 XML(扩展标记语言)于 1998 年 2 月被引入软件工业界时,它给整个行业带来了一场风暴.有史以来第一次,这个世界拥有了一种用来结构化文档和数据的通用且适应性强的格式,它不 ...